CSS - No puedo centrar el contenido de una lista con flex-grow aplicado

Tengo un menu creado con una lista. He aplicado display-flex a <ul> y luego flex-grow a los <li> para que crezcan hasta la anchura total de <ul>.

Cuando intento centrar el texto dentro de <li> no puedo. Lo he intentado aplicando text-align:center tanto a <ul> como a <li> y no funciona.

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Methodology</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>



*{ margin:0;
padding:0;
}

nav{
display:flex;
align-items: stretch;
float: none;
text-align:center;
border: solid 11px green;
flex-grow: 1;
}

ul{
display:flex;
justify-content:center;
flex-wrap:wrap;
align-items: stretch;
float: none;
margin-left:-11px;
margin-right:-11px;
text-align:center;
border: solid 13px black;
flex-grow: 1;
}

li{
margin-top:8px;
display: flex;
align-items: stretch;
padding-left: 11px;
padding-right: 11px;
border: solid 15px red;
flex-grow: 1;
text-align: center;
}

Gracias

Perdon!!!!! Me acabo de dar cuenta!!! Debo aplicar a <li> justify-content:center

• menu.zip(795,0 B)

Perdon!

Me olvide simplemente de indicar justify-content:center para el <li>