flexbox контейнер не всегда центрируется

Question

У меня есть контейнер flexbox (ul), который периодически центрируется (это предусмотрено), а не (при обновлении представления). Это ошибка или что-то не хватает в css?

Live example on the jsFiddle.

HTML:

<div id="lower-half"> 
     <nav> 
      <ul> 
       <li> 
        <a href="menu.html">Menu</a> 
       </li> 
       <li> 
        <a href="catering.html">Catering</a> 
       </li> 
       <li> 
        <a href="gallery.html">Gallery</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 

      </ul> 

     </nav> 

CSS:

nav ul{ 
    display: flex; 
    height: 100%; 
    margin: 0 auto; 
    justify-content: center; 
    flex-wrap: wrap; 
    list-style: none; 
    border: 3px solid; 
    border-radius: 20px; 
    width: 360px; 
    background-color: white; 
} 

nav ul li { 
    align-self: center; 
    flex-grow: 1; 
} 

Answer 1

Это звучит как странный вопрос - Является ли это браузер связанных? Я просто попробовал pasting your code into a Pen, и это действительно центрирует навигацию.

Однако, чтобы решить вашу проблему, я немного изменил свой CSS, не затрагивая ваш дизайн и позиционирование. Возможно, это может решить вашу проблему обновления.

Updated Pen

HTML

<nav> 
    <ul> 
     <li> 
      <a href="menu.html">Menu</a> 
     </li> 
     <li> 
      <a href="catering.html">Catering</a> 
     </li> 
     <li> 
      <a href="gallery.html">Gallery</a> 
     </li> 
     <li> 
      <a href="about.html">About</a> 
     </li> 

    </ul> 

</nav> 

CSS

nav { 
    display: flex; 
    justify-content: center; 
} 

nav ul{ 
    display: flex; 
    flex-wrap: wrap; 
    width: 360px; 

    list-style: none; 
    border: 3px solid; 
    border-radius: 20px; 
    background-color: white; 
} 

nav ul li { 
    flex-grow: 1; 
}