Solucionado
Vi que outros tiveram o mesmo problema, mas parece que ninguém conseguiu resolver.
.cabecalhoPrincipal .container{
display:flex;
justify-content: space-between;
}
.cabecalhoPrincipal-nav{
display: flex;
}
.conteudoPrincipal-cursos{
display:flex;
flex-wrap: wrap;
}
.conteudoPrincipal-cursos-link{
width: 23%;
}
Olá, Matheus. Eu meio que resolvi! :)
Meio porque o projeto é feito para desktop ou mobile, e quando fica entre um e outro, acaba quebrando um pouco mesmo. Aí seria necessário aplicar estilos para telas com largura semelhante a de tablets por exemplo.
Eu resolvi tirando os nth child com margin 0, e aplicando uma propriedade que foi lançada no flexbox após o lançamento deste curso, que se chama gap.
Essa propriedade aplica espaçamento apenas entre os itens, e solucionou o problema pelo menos no meu navegador.
Ficou da seguinte forma:
.conteudoPrincipal-cursos-link {
width: 23%;
gap: 1%;
}Ah e estamos lançando em breve um curso de flexbox atualizado, ele já foi gravado e está em etapa de edição.
Bons estudos! :)
Obrigado!