Layout irregular

Olá,

Fiz o passo-a-passo da aula 3 fornecida no vídeo, mas o resultado ficou diferente do esperado.

Abaixo a imagem de como ficou o layout: https://www.flickr.com/photos/147118712@N06/shares/aWj340

Para tirar dúvida, entrei na aula 4 e baixei o projeto. Utilizei o arquivo "flexbox.css" fornecido pelo projeto e o resultado foi exatamente o mesmo.

Abaixo o código que estou utilizando.

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

.cabecalhoPrincipal-nav {
    display: flex;
}

.rodapePrincipal-navMap-list {
    display: flex;

    /* flex-flow: column wrap; */
    flex-direction: column;
    flex-wrap: wrap;

    height: 250px;
}

.rodapePrincipal-patrocinadores .container {
    display: flex;
    justify-content: space-between;
}

.rodapePrincipal-patrocinadores-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 70%;
    margin-right: 5%;
}

.rodapePrincipal-contatoForm {
    width: 25%;
}

.rodapePrincipal-contatoForm-fieldset {
    display: flex;
}

.conteudoPrincipal-cursos {
    display: flex;
    flex-wrap: wrap;
}

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

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

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

P.S.: Nos testes que eu fiz, o desalinhamento dos itens acontece quando eu coloco o "margin: 1%;" na classe ".conteudoPrincipal-cursos-link". Segue abaixo:

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

Se eu retiro o "margin: 1%;" os itens ficam alinhados normalmente.

Vocês tem alguma ideia de qual pode ser o problema?

Desde já agradeço.