FlexBox Atualizado

Olá Maurício, tudo bom?

O Santo pode ficar tranquilo, kkk. O que acontece é que esses elementos serão distribuídos de acordo com a largura disponível. No caso da lista de cursos a largura é de 84% em telas maiores que 769px.

// style.css
@media(min-width: 769px) {

    .container {
        width: 85%;    
    }
    . . . 
}

O elemento nav vai usar 100% dessa largura.

A propriedade wrap vai pegar a largura definida em cada conteudoPrincipal-cursos-link, somar com a margem deles e distribuir os elementos. Se o conteudoPrincipal-cursos-link não tivesse margem alguma, ficariam 5 elementos alinhados, mas graças a sua margem de 1%, cada elemento tem a largura de 22%, então ficam 4 elementos alinhados.

Sugiro que utilize a ferramenta de inspecionar elementos dos navegadores, de preferencia o Chrome para realizar alguns testes e ver quais propriedades CSS estão sendo aplicadas em determinado elemento por exemplo.

Basta clicar com o botão direito do mouse e ir na opção Inspecionar, ou apertar a tecla F12.

Vai abrir uma janela dividindo espaço com a página que você consegue ver toda seu HTML e ver as propriedades CSS que cada elemento possui.

Esperto ter ajudado. Bons estudos, Maurício.

Cara eu sei que talvez seja estranho te responder tão tarde, mas aqui no meu código teve uma situação parecida com a sua, olhando dentro dos arquivos de CSS, os que já vieram no projeto do professor, aparentemente tinha alguns códigos la, pre-configurado o que acabou deixando tudo certa de maneira automática sem praticamente mudarmos nada.

No meu ficou assim:

Como pode ver no meu arquivo.CSS, Os codigos que deveriam estar la, não estão.

Exemplo disso, faltam esses códigos, dentre outros também.

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

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

Caso queira conferir, se você for inspecionar a pagina e clicar em uma das classes da lista, vai ver que la terá códigos de outros arquivos CSS não presentes no seu.