https://loja-wheat-beta.vercel.app/
https://github.com/Lsichieri/loja link publico
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa tarde mano!
Para resolver isso vamos usar o CSS Flexbox, primeiro vamos centralizar a lista e o titulo:
Nota: Seria ideal usar o nome "topico" no lugar de "tópico" nas classes, retirando qulaquer acento da palavra
No seu css vamos utilizar o seguinte codigo:
text-align: center;
}
feito isso vamos centralizar sua lista e os seus itens, também vamos deixar ele responsivo usando o 'flex-wrap', desse modo assim que diminuimos a tela ele vai fazer uma quebra de linha e continuar na proxima linha.
Vamos utilizar um 'gap' para dar um espaçamento entre os itens também:
.topicos__lista {
list-style: none;
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
feito isso o seu site deve ficar assim:
Agora é só terminar de estilizar como você ja fez nas outras áreas, com o padding, color, a fonte, as margens e tirar o underline das tag (a).
Espero ter ajudado, e boa sorte na sua carreira Front-End!
aonde uso o text-align: center;
}
o text-align você vai utilizar na seguinte classe:
.tópicos__titulo {
text-align: center;
}