Boa tarde, Brandon.

Segue o que você precisa fazer para corrigir esse "problema"

*Arquivo *flexbox.css **

Remova o seguinte conteúdo:

.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;
}

Explicação: Como o arquivo flexbox.css é carregado depois do arquivo style.css (ordem em que ele aparece no header do index.html), essas estilizações estão sobrescrevendo algumas regras existente no arquivo style.css, por isso precisamos remover essas linhas

Insere o seguinte conteúdo:

@media(max-width: 768px) {
    ....
    .conteudoPrincipal-cursos-link {
        ...
        margin: 1% 0;
    }
}

Explicação: Va ser adicionado uma margin-top e margin-bottom de 1% e margin-left e margin-right de 0 quando a resolução for no máximo de 768px

*Arquivo *style.css **

Insere o seguinte conteúdo (pode ser na linha 50), depois de .subtitulo {...}:

.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;
}

Explicação: Esse código é o que removemos do arquivo flexbox.css

Para melhorar ainda mais a exibição em diferentes resolução:

Remover a seguintes linhas que está dentro de @media(min-width: 769px)

.conteudoPrincipal-cursos-link:nth-child(3n) {
        margin-right: 0;
}
.conteudoPrincipal-cursos-link:nth-child(3n+1) {
        margin-left: 0;
}

Explicação: Para que não seja aplicado essa regra de margin

Podemos adicionar também a seguinte regra (pode adicionar no final do arquivo)

@media (max-width: 960px) {
  .conteudoPrincipal-cursos-link {
    width: 49%;
  }

  .conteudoPrincipal-cursos-link:nth-child(2n) {
    margin-right: 0;
  }

  .conteudoPrincipal-cursos-link:nth-child(2n + 1) {
    margin-left: 0;
  }
}

Explicação: Para que seja aplicada essa regra de with/margin quando a resolução for no máximo de 960px

Tenho o seguinte repo no github onde realizei algumas outras melhorias, caso queira consultar ;). Obs: Eu juntei os dois arquivos (flexbox e style) em um só.

Aqui na minha máquina estava com o mesmo problema somente alterei a ordem no index.html, coloquei o flexbox pra cima e deixei o arquivo style embaixo, coloquei as mesmas características do vídeo, depois dessa pequena mudança no index me parece que o alinhamento está correto, tente fazer isso e vê se funciona pra você.