Oi, Luis! Como vai?
Pedimos desculpas pela demora em obter um retorno.
O problema da barra de rolagem pode estar relacionado a um comportamento padrão do flexbox e ao uso do height: 100vh no <body>. O 100vh pode causar um pequeno overflow em alguns navegadores, principalmente quando há margens e paddings envolvidos.
Para corrigir, você pode adicionar overflow: hidden; no body ou garantir que o flexbox não force o layout além do limite da tela. Por exemplo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: black;
color: aliceblue;
overflow-x: hidden; /* Evita rolagem horizontal */
}
a {
color: aqua;
}
.imagem-formatada {
width: 488px;
height: 500px;
}
.titulo-destaque {
color: aqua;
}
.apresentacao {
margin: 10%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap; /* Garante que os elementos se ajustem em telas menores */
}
.apresentacao__conteudo {
width: 615px;
max-width: 100%; /* Impede que estoure a largura */
}
.apresentacao__conteudo__titulo {
font-size: 36px;
}
.apresentacao__conteudo__texto {
font-size: 34px;
}
Neste código:
overflow-x: hidden; previne a rolagem horizontal.flex-wrap: wrap; evita que os elementos do flexbox ultrapassem a largura da tela.max-width: 100%; impede que o conteúdo ultrapasse os limites da div.
Isso deve resolver o problema da barra de rolagem. Se precisar de mais ajustes, basta nos avisar!
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição.
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
