Muitos tem tido o problema de a grid mesclar quando chega a resolução de 768px pra cima.
https://imgur.com/ETivjid (link do problema)
Segue abaixo minha resolução:
Vá no arquivo style.css e encontre o seguinte código:
@media(min-width: 769px) {
.container {
width: 85%;
}
.subtitulo {
text-align: left;
}
.cabecalhoPrincipal-nav-link {
border-radius: 5px;
border: 1px solid #9799A6;
}
.cabecalhoPrincipal-nav-link:hover {
color: #FFF;
background-color: #9799A6;
}
.cabecalhoPrincipal-titulo {
margin: 0;
}
.cabecalhoPrincipal-nav {
width: auto;
}
.cabecalhoPrincipal-nav-link {
margin: 0 0 0 10px;
}
.rodapePrincipal-contatoForm {
margin-top: 0;
text-align: left;
}
.conteudoPrincipal-cursos-link:nth-child(3n) {
margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(3n+1) {
margin-left: 0;
}
}
Remova as duas ultimas instruções:
.conteudoPrincipal-cursos-link:nth-child(3n) {
margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(3n+1) {
margin-left: 0;
}
No final teremos isso:
@media(min-width: 769px) {
.container {
width: 85%;
}
.subtitulo {
text-align: left;
}
.cabecalhoPrincipal-nav-link {
border-radius: 5px;
border: 1px solid #9799A6;
}
.cabecalhoPrincipal-nav-link:hover {
color: #FFF;
background-color: #9799A6;
}
.cabecalhoPrincipal-titulo {
margin: 0;
}
.cabecalhoPrincipal-nav {
width: auto;
}
.cabecalhoPrincipal-nav-link {
margin: 0 0 0 10px;
}
.rodapePrincipal-contatoForm {
margin-top: 0;
text-align: left;
}
}
O problema ocorre porque as duas ultimas estilizações serviam para quando o flex não posicionava as grids corretamente lá no inicio do curso, tendo que fazer manualmente a margin para os itens.
Espero ter ajudado.