Conteúdo da rodapePrincipal-navMap-list após flex-wrap fica muito próximo

Olá, espero que possam me ajudar.

Ao aplicar a propriedade flex-wrap, na class rodapePrincipal-navMap-list, o conteúdo realmente quebrou. No entanto, o mesmo ficou bastante próximo um do outro, diferente do exibido no course.

1 - Vi outras duas três dúvidas semelhantes aqui no fórum, no entanto, em nenhuma delas havia (até o momento em que posto), uma solução.

2 - Tentei aplicar a propriedade space-between, e aumentei em 10px o height.

3 - Imagem do resultado

Imagem

Parte do código HTML

<section class="rodapePrincipal-navMap">
                <h3 class="subtitulo">Mapa de cursos</h3>
                <nav class="rodapePrincipal-navMap-list">

                    <h4 class="navmap-list-title navmap-list-title-backend">Linguagens Backend</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Java</a>
                    <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Python</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Lógica de programação</a>

                    <h4 class="navmap-list-title navmap-list-title-frontend">Linguagens Frontend</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Desenvolvimento Web</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
                    <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>

                    <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
                    <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
                    <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
                    <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Django</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>

                    <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de dados</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
                    <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>

                </nav>
            </section>

Código CSS Utilizado

.rodapePrincipal-navMap-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 260px;
}