WordPress : CSS ne stylera pas correctement la sortie de wp_nav_menu()

J’essaie de créer un thème avec un menu horizontal qui est dynamiquement étiré pour remplir l’élément conteneur. J’utilise wp_nav_menu() pour récupérer un menu depuis le backend et le styliser via CSS. Voici un peu de code :

        <?php wp_nav_menu(
            array( 
                'theme_location' => 'headerNavMenu', 
                'menu_class' => 'headerNavMenu',
                'container_id' => 'headerNavMenu'
            )
        ); ?>

        <div class="headerNavMenu">
          <ul>
            <li class="page_item page-item-7"><a href="http://localhost/wordpress/site1/">site1</a></li>
            <li class="page_item page-item-17"><a href="http://localhost/wordpress/site2/">site2</a></li>
            <li class="page_item page-item-14"><a href="http://localhost/wordpress/site3/">site3</a></li>
            <li class="page_item page-item-10"><a href="http://localhost/wordpress/site4/">site4</a></li>
          </ul>
        </div>

Le premier paragraphe est le code original et le second est la sortie de la fonction PHP. La seule différence sont les sauts de ligne que j’ai ajoutés pour la lisibilité. Le CSC :

.headerNavMenu {
   width: 100%;
   border: 1px #a2a2a2 solid;
}

.headerNavMenu ul {
    text-align: justify;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: 90%;
    list-style-type: none;
   list-style-image: none;
   margin-left:auto;
   margin-right:auto;

}

.headerNavMenu ul::after {
  content: '';
  width: 100%; /* Ensures justification for single lines */
  display: inline-block;
}

.headerNavMenu li {
   display: inline;
   line-height: 100%;   
}

Le CSS est appliqué de manière égale sur les deux parties du code, mais seule la seconde s’affiche correctement. La première partie est alignée à gauche, avec tous les liens côte à côte sans aucune marge. La seule différence dans le code que j’ai pu détecter était les sauts de ligne. Comment résoudre ce problème ?

Merci d’avance!

Solution n°1 trouvée

J’ai trouvé une autre façon de faire ceci:

.headerNavMenu {
    width: 100%;
    display: table;
    text-align: center;
    margin: 0;
}

.headerNavMenu ul {
    display: table-row;
}

.headerNavMenu li {
    display: table-cell;
    margin: 0;
}