CSS won't style output of wp_nav_menu() correctly

Question

I'm tyring to create a theme with a horizontal menu that is dynamically streched to fill the container element. I use wp_nav_menu() to fetch a menu from the backend and style it via CSS. Here some 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>

The first paragraph is the original code and the second is the output of the PHP-function. The only difference are the line breaks I added for readability. The CSS:

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

The CSS is applied equally on both parts of the code, but only the second one is displayed correctly. The first part is aligned left, with all links right next to each other without any margin. The only difference in the code I could detect were the line breaks. How do I fix that?

Thanks in advance!

Answer 1

I found another way to do this:

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

.headerNavMenu ul {
    display: table-row;
}

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