Espaçamento irregular (aula 3 - width: 23%; margin:1%;)

No vídeo 3, ao incluir o código a seguir, o espaçamento entre os blocos ficou irregular:

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

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

Então, comentei os códigos (ver abaixo) e deixei apenas width:23% e o espaçamento ficou normal (tanto no Firefox quanto no Chrome)

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

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

Deixando o margin: 1.3% conforme o código a seguir, o espaçamento fica certo:

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

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

}

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

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