[Dúvida] Página quebrando para a direita ao dar zoom no navegador | Front-end

Olá pessoal!

Gostaria de ajuda com o meu código html e css referente ao desafio CodeChella da Alura. O problema é que ao dar zoom a página apresenta uma quebra de conteúdo para a direita do navegador adicionando uma barra de rolagem horizontal e apresentando apenas a cor de fundo do projeto.

O problema não acontece quando o zoom da página está 100% apenas de 125% em diante. Acredito que o problema esteja no meu style.css já que o problema também acontece em outras páginas que eu criei. Pesquisei um pouco a respeito deste problema mas não consegui entender as respostas a respeito, se possível gostaria que me mostrassem um exemplo prático. Vou copiar meu código html e css aqui.

Parte do meu style.css para referência

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

a {
    text-decoration: none;
    color:#FFFFFF;
    max-width: 1440px;

}

.corpo{
    background-image: linear-gradient(#008364,#4650BD,#008364);
    margin: 0 auto;

}


.menu__cabecalho {


    background-color: #4650BD;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 32px 120px;
    gap: 32px;



}


.menu__cabecalho__navegacao {
    display: flex;   
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;
    width: 590px;
    height: 40px;

    /*config typo*/
    /*IMPORTAR FAMILIA DE FONTES*/
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 40px;
}

.banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.container__sobre {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 64px 120px;

}

.sobre__imagem {

    height: 381px;
    border-radius: 16px;

}

.item__sobre {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 48px;

    width: 1197px;
    height: 381px;
    border-radius: 0px;

}

.item__texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 24px;

    width: 540px;
    height: 340px;


}

.item__texto__titulo {
    color: #FFFFFF;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-size: 32px ;
    line-height:38px;
    display: flex;
    align-items: center;
    text-align: center;
}

.item__texto__paragrafo {
    color: #FFFFFF;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 40px;
    display: flex;
    align-items: center;
    text-align: center;
}

.item__texto__botao {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    gap: 16px;

    width: 256px;
    height: 56px;
}

.lineup {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 32px 120px;
    gap: 32px;
}

.lineup__titulo {
    color: #FFFFFF;
    font-family: 'Calistoga';
    font-style: normal;
    font-weight: 400;
    font-size: 64px;
    line-height: 83px;
    display: flex;
    align-items: center;
    text-align: center;


}

.lineup__sabado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 56px 120px;
    gap: 48px;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.sabadoedomingo__headliner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 48px;
}

.sabadoedomingo__headliner__banda {
    color: #FFFFFF;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 800;
    font-size: 48px;
    line-height: 56px;
    display: flex;
    align-items: center;
}

.sabadoedomingo__primeiralinha {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 32px;
}

.sabadoedomingo__primeiralinha__bandas {
    color: #FFFFFF;
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 700;
    font-size: 38px;
    line-height: 47px;
    display: flex;
    align-items: center;

}

Oi Higor, tudo bem?

Vou tentar te ajudar a entender e resolver esse problema.

Após analisar o código CSS que você compartilhou, identifiquei algumas possíveis causas para a quebra de conteúdo. Vou abordar cada uma delas e fornecer sugestões de solução.

Largura fixa: Notei que em várias partes do seu CSS há definição de larguras fixas para os elementos, como a classe "menu__cabecalho__navegacao" e "item__sobre". Essas definições podem ser problemáticas quando se trata de redimensionar a página, especialmente ao dar zoom. Uma solução é utilizar larguras relativas, como porcentagem, em vez de valores fixos. Por exemplo:
```
.menu__cabecalho__navegacao {
 width: 100%; /* Em vez de width: 590px; */
}
```
Isso permite que os elementos se ajustem proporcionalmente ao tamanho da janela do navegador, evitando quebras de conteúdo.
Overflow horizontal: Ao definir um máximo de largura para a tag "a" em seu CSS, através da regra "max-width: 1440px;", você está limitando o tamanho máximo dos links. Isso pode causar uma quebra de conteúdo quando o zoom é aplicado. Sugeriria remover essa regra ou aumentar o valor do "max-width", se necessário, para garantir que os elementos se ajustem adequadamente ao zoom.
Barra de rolagem horizontal: A presença da barra de rolagem horizontal indica que o conteúdo da página é maior do que a largura visível. Isso pode ser causado por várias razões, como margens, paddings ou larguras excessivas dos elementos. Verifique se há alguma propriedade CSS que está adicionando espaço extra aos elementos, forçando a quebra da página. Além disso, certifique-se de que a largura total do conteúdo, incluindo margens e paddings, não ultrapasse o tamanho da janela do navegador.
Responsividade: Seu código atual não parece ser responsivo, o que pode contribuir para a quebra de conteúdo em dispositivos ou quando o zoom é aplicado. Sugiro adicionar regras CSS para tornar o layout mais adaptável a diferentes tamanhos de tela. Por exemplo, você pode usar media queries para definir estilos específicos para dispositivos móveis ou telas menores.

Indico que faça esse curso: HTML e CSS: responsividade com mobile-first, para que entenda como fazer um site responsivo.

Espero que essas informações tenham sido úteis para você.

Ah! Não sei você está sabendo, mas no nosso discord estão tendo vários grupos de estudos, você pode entrar e tirar suas dúvidas. Saiba mais aqui.

Um abraço e bons estudos.