Oi!
1) Primeiro, verifique o zoom da página
Confira se o zoom do navegador está em 100%:
- Chrome/Edge/Brave:
Ctrl + 0
(Windows) ou Cmd + 0
(macOS) para resetar o zoom. - Na barra do navegador, o ícone de zoom deve mostrar 100%.
- No Windows, conferir também o Scale do sistema: Configurações → Sistema → Tela → Escala (100%–125% é comum; se estiver 150%+, tudo fica maior).
Dica extra: o seu HTML já tem <meta name="viewport" content="width=device-width, initial-scale=1.0">
, então o zoom de sistema/navegador influencia bastante.
2) Deixe o título responsivo (sem estourar)
No seu CSS o h1
está com 72px fixos. Troque por um tamanho responsivo usando clamp()
, assim ele se adapta ao tamanho da tela:
h1 {
font-family: 'Chakra Petch', sans-serif;
/* de 32px até 72px, crescendo conforme a largura da tela */
font-size: clamp(32px, 6vw, 72px);
line-height: 1.1; /* ajuda a não “sangrar” pelas bordas */
padding-bottom: 3rem;
text-wrap: balance; /* melhora a quebra de linha em navegadores modernos */
word-break: normal;
}
Se quiser garantir ainda mais, você pode reduzir um pouquinho o padding e limitar a largura do bloco de texto:
.container__informacoes {
flex: 1;
padding: 2rem; /* era 3rem */
max-width: 720px; /* evita linhas muito longas */
}
.container {
max-width: 1200px; /* mantém o layout sob controle em telas grandes */
width: 80%;
}
E, caso alguma palavra muito longa (ou número) esteja “empurrando” o layout, você pode forçar a quebra:
.container__texto {
overflow-wrap: anywhere; /* quebra palavras/números compridos */
}
Por que isso funciona?
clamp(min, ideal, max)
deixa a fonte crescer/encolher conforme a largura da viewport sem passar de um limite saudável.text-wrap: balance
(quando suportado) melhora a distribuição das quebras de linha do título.- Limitar a largura dos blocos evita que textos grandes “encostem” nas bordas.
Um abraço e bons estudos.