Fala pessoal!
Só uma dúvida meio besta, tava fazendo o projeto e quando importei ele pra começar a fazer as modificações, a resolução dele tá maior que a tela do meu notebook e tem a scroll bar vertical e horizontal... tentei mudar algumas coisas no CSS mas não tive exito pra arrumar.
Alguém tem alguma solução?
Oi Flávio, tudo bem?
Desculpa a demora em te responder!
A barra de scroll horizontal se origina devido à propriedade margin: 15px 15px adicionada à classe .header e pela propriedade width:100% adicionada às classes .livros__disponiveis e .rodape no arquivo style.css. Essas propriedades regulam a largura da tela impactando a maneira como os elementos são dispostos.
Podemos corrigir esse problema removendo a propriedade widthdas classes .livros__disponiveis e .rodape e alterando o valor da margin na classe .header de 15px 15pxpara 15px 0.
Desse modo, o código para essas classes seria escrito da seguinte maneira:
Código para a classe .header:
.header {
text-align: center;
background-color: var(--bg-color);
margin: 15px 0;
}Código para a classe .livros__disponíveis:
.livros__disponiveis {
height: 80px;
background-color: var(--text-description-color);
margin-top: 1rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}Código para a classe .rodape:
.rodape {
height: 104px;
background: linear-gradient(96.48deg, #002f52 36.3%, #326589 99.56%);
margin-top: 1rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}Espero ter ajudado. Caso tenha outras dúvidas, estarei à disposição.
Abraços!