Posicionamento do Flexbox não esta sendo respeitado

Boa tarde, estou fazendo o exercício do vídeo e a formatação no meu note não esta ficando conforme demonstrado no vídeo.

https://marciodealmeidarosa.github.io/Cursos_Alura/Formacao_front_end/CURSOS_DE_HTML_E_CSS/Curso_Flexbox_Posicione_elementos_na_tela/index.html

O HTML esta exatamente igual ao enviado no arquivo do curso.

O arquivo de CSS:

/*ajuste cabeçalho - início*/

.cabecalhoPrincipal .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cabecalhoPrincipal-nav {
    display: flex;
}


/*ajuste cabeçalho - fim*/


/*ajuste rodapé patrocinadores - início*/

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


/*ajuste rodapé patrocinadores - fim*/


/*ajuste rodapé principal - início*/

.rodapePrincipal-navMap-list {
    display: flex;
    flex-flow: column wrap;
    height: 250px;
}


/*ajuste rodapé principal - fim*/


/*ajuste conteúdo principal - início*/

.conteudoPrincipal-cursos {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.conteudoPrincipal-cursos-link {
    width: 23%;
    padding: 1%;
}

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

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


/*ajuste conteúdo principal - fim*/