Solucionado
Na versão mobile, o menu hamburguer tem um espaçamento à esquerda que eu não defini. Isso faz com que fique uma linha vertical branca ao lado do background azul gradiente quando clicamos no hamburguer e a lista com os links aparece.
Na versão de tablet e notebook, a lista que aparece quando clicamos em categorias está desalinhada em relação ao botão de categorias.
Não consegui encontrar o motivo para isso acontecer.
Link do projeto: https://github.com/AndreLobo12/AluraBooks
hoje, com a Alura e o Google Gemini
Oi André, tudo ok?
Para o primeiro problema, a solução foi na classe .container__botao no arquivo header.css linha 41 no lugar de appearance: none;, coloque display: none;, assim o espaço some. Ah e na classe .cabecalho__menu você pode aumentar o tamanho do width de 24px para talvez uns 41px, acho que fica um valor bom, com uma aparência legal.
Já o segundo problema eu não consegui identificar. Se conseguir explicar com mais detalhes e com imagens se der, ajuda bastante.
Era isso. Espero ter ajudado.
Qualquer coisa eu estarei por aqui.
Abraços e bons estudos.
Renan, obrigado pela ajuda. O primeiro problema foi resolvido com a sua ajuda!
Este é o segundo problema, os itens da lista estão um pouco desalinhados comparando com o botão de categorias, eles não deveriam ficar logo abaixo e alinhados?
Oi André, perdão a demora.
Eu analisei seu caso e para mim o layout está perfeito.
Mas se você deseja algo, além disso, uma possibilidade é aumentar o tamanho que o texto "categorias" ocupa, selecionado a classe dele e mudando o tamanho da letra, ou o espaçamento com margin, padding e/ou width e height o mesmo se aplica para a lista de itens, você pode mudar o tamanho deles usando essas propriedades e se desejar pode usar valores negativos na propriedade margin se quiser recuar eles. Ou pode até usar uma posição absoluta, o que não é uma abordagem recomendada (nem a dos valores negativos na margin), mas ainda assim pode ser usada, e alguns sites famosos usam isso, de forma sutil, mas usam, é uma opção. Mas aí vai de você escolher o que usar.
Se for o que eu estou pensando, se você estiver falando da cor no fundo da palavra "categorias", então um padding com um valor aplicado somente na horizontal já deve resolver, algo tipo isso:
.classe {
/* outras propriedades */
padding: auto 2rem; /* O primeiro valor "auto" controla a vertical, e o segundo (2rem) controla a horizontal, esse é o valor que você deve/pode personalizar. */
}
Era isso. Se tiver alguma dúvida mais pontual eu estarei aqui, ou você pode iniciar um novo tópico que é o mais recomendado.
Abraços e bons estudos.