A partir desta resolução, alguns itens da lista de cursos ficam grudados e vão se separando conforme aumento a resolução da tela. Existe alguma possibilidade de resolução deste bug? Estarei disponibilizando meu código, pois pode haver algum erro nele que passou imperceptível.
.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-flow: column wrap; /* Organiza em colunas e quebra para a próxima */
height: 250px;
}
.conteudoPrincipal-cursos {
display: flex;
flex-wrap: wrap; /* quebra para a próxima linha se faltar espaço */
}
.conteudoPrincipal-cursos-link {
width: 23%;
margin: 1%;
}
/* tira a margem direita de todos os elementos de 4 em 4 */
.conteudoPrincipal-cursos-link:nth-child(4n) {
margin-right: 0;
}
/* tira a margem direita de todos os elementos de 5 em 5 */
.conteudoPrincipal-cursos-link:nth-child(4n+1) {
margin-left: 0;
}
/*parte mobile*/
@media(max-width: 768px){
.cabecalhoPrincipal-nav {
flex-direction: column;
}
.cabecalhoPrincipal .container {
flex-direction: column;
align-items: initial;
text-align: center;
}
.conteudoPrincipal-cursos {
flex-direction: column;
}
.conteudoPrincipal-cursos-link {
width: 100%;
}
.rodapePrincipal-navMap-list {
height: auto;
}
.rodapePrincipal-patrocinadores .container {
flex-direction: column;
align-items: center;
}
.rodapePrincipal-patrocinadores-list {
margin: 0;
width: 100%;
}
.rodapePrincipal-contatoForm {
width: 100%;
}
.rodapePrincipal-contatoForm-fieldset {
justify-content: center;
}
}