Olá, Luiz. Como vai?
Analisando a imagem do seu projeto AluraBooks, percebi que você está na fase de estruturar o rodapé e as seções de informações. Esse é um desafio comum quando começamos a trabalhar com Flexbox ou Grid para alinhar ícones e textos.
Para que esses ícones fiquem no lugar correto, a estratégia mais eficaz no CSS é garantir que cada item da lista (ou grupo de informações) seja um container flexível.
Aqui estão algumas dicas práticas para resolver isso:
display: flex e align-items: center no elemento pai que envolve ambos.gap para criar um distanciamento uniforme entre o ícone e o conteúdo textual sem precisar de margens individuais.<ul>), lembre-se de remover os estilos padrões com list-style: none e o padding.Um exemplo de como o seu CSS pode ser estruturado para esses itens:
.lista-rodape__item {
display: flex;
align-items: center;
gap: 0.5rem; /* Ajuste conforme o design */
}
.lista-rodape__link {
text-decoration: none;
color: var(--cor-principal); /* Ou sua variável de cor */
}
Se o problema for os ícones do cabeçalho ou das seções de "Novos Lançamentos" que não estão centralizados nos cards, verifique se o container pai possui um justify-content: center ou se há algum padding sobrando que esteja empurrando o ícone para fora do eixo.
Como você está usando a abordagem mobile-first, certifique-se de que não há um estilo fixo em resoluções menores que esteja impedindo o reposicionamento quando você expande a tela.
Espero que possa ter lhe ajudado!