Fiz todos procedimentos da aula e no final o grid principal de cursos ficou com alguns elementos desalinhados na exibição da página.
O espaço entre alguns cursos na página estão maiores que outros. Gostaria de saber o que pode estar acontecendo?
Abaixo o código que coloquei até agora do flexbox.css:
.cabecalhoPrincipal .container {
display: flex;
align-items: center;
justify-content: space-between;
}
.cabecalhoPrincipal-nav {
display: flex;
}
.rodapePrincipal-patrocinadores .container {
display: flex;
justify-content: space-between;
}
.rodapePrincipal-patrocinadores-list {
display: flex;
align-items: center;
justify-content: space-around;
width: 70%;
margin-right: 5%;
}
.rodapePrincipal-contatoForm {
width: 25%;
}
.rodapePrincipal-contatoForm-fieldset {
display: flex;
}
.rodapePrincipal-navMap-list {
display: flex;
/*flex-direction: column;
flex-wrap: wrap;*/
flex-flow: column wrap;
height: 250px;
}
.conteudoPrincipal-cursos {
display: flex;
flex-wrap: wrap;
}
.conteudoPrincipal-cursos-link {
width: 23%;
margin: 1%;
}
.conteudoPrincipal-cursos-link:nth-child(4n) {
margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(4n+1) {
margin-left: 0;
}