Ele não está inserindo a margin a esquerda e também não está retirando a margin a direita. Não estou conseguindo entender. Os quadros também estão desalinhados.
.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;
}
<nav>
<ul class="conteudoPrincipal-cursos">
<li class="conteudoPrincipal-cursos-link"><a href="#">Java</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">PHP</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Ruby on Rails</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">.NET</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Pascal</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Flexbox</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Desenvolvimento Web</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Java Web</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Javascript</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">AngularJS</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">TDD com C</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Redes de computadores</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">MySQL</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">MariaDB</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Postegres</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
<li class="conteudoPrincipal-cursos-link"><a href="#">Lógica de programação</a></li>
</ul>
</nav>