https://loja-wheat-beta.vercel.app/
https://github.com/Lsichieri/loja link publico
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 .
Espero ter ajudado, e boa sorte na sua carreira Front-End!