Solucionado
Bom dia, o problema apresentado no curso, sobre a dificuldade de reposicionar os elementos com o Flexbox apenas, partindo para utilização do Grid e o nth-child(). No meu caso não foi preciso.
.conteudoPrincipal-cursos {
display: flex;
flex-wrap: wrap;
}
.conteudoPrincipal-cursos-link {
width: 23%;
margin-bottom: 1%;
}Adicionando apenas esse pedaço de código, o Grid ficou correto e já com as margens das laterais corretas. Sabem me dizer o por que ?
hoje, com a Alura e o Google Gemini
Fala ai Henrique, tudo bem? Os códigos estão iguais ao da aula (esses que tu postou)?
Consegue me mandar os códigos da aula referente ao nth-child? Assim eu consigo tentar imaginar a diferença e o motivo da sua não ter precisado.
Espero ter ajudado.
Bom dia Matheus, tudo certo!
Sim os códigos estão iguais ao da aula.
Segue link: https://github.com/Henrique-Santos/Posicionando-Elementos-Com-Flexbox
Fala ai Henrique, dei uma olhada no projeto, os nth-child estão sendo utilizados para remover espaçamentos internos dos primeiros e últimos cursos de cada linha.
Para que os mesmos ocupem 100% de largura do seu componente pai.
Tente aplicar uma cor de fundo para a seção dos cursos, exemplo:
.conteudoPrincipal-cursos {
background: red;
}Agora tente comentar os nth-child você deve reparar que os elementos não irem ocupar a parte vermelha.
Espero ter ajudado.