Para que nosso elemento não saia de dentro da classe pai, podemos usar uma medida (height) para que, quando nosso elemento chegue até essa medida, ele quebre usando o flex-wrap: wrap, e comece na próxima linha:
Como abaixo:
.rodapePrincipal-navMap-list{
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 265px; /*no meu nootbook essa foi a medida que encontrei para a quebra certa dos elementos*/
O que me preocupa é: Como sei que em outro computadores, essa medida irá dar certo? Já que, na do professor ele colocou 250px e vi que outros colegas chegaram a outras medidas.
Tem outra forma de estilizar, talvez estilizando os a e os h4, de formas independentes?