Auto width when add list - css

Question

I have a simple menu (centered with margin:0 auto) with some list items.
Now, I'm trying to keep the menu on the same centered position when I add an additional list items.
Here is the fiddle play with it
ul{
list-style-type: none;
background: red;
margin:0 auto;
width: 56%;
max-width:600px
}
ul li{
display: inline-block;
width: 100px;
background-color: #000;
color: #fff;
}
I want to an additional li's to the ul to wrap it and still be centered.
I don't want to use flexbox because IE doesn't support it :D
The problem is solved. Giving the ul {display:table} Thank you all,especially Coop !

Answer 1

Not sure if this is exactly what you're after but I've often had issues centering nav menus and came up with this solution:
ul{
display: table;
margin: 0 auto;
list-style-type: none;
background: red; }
ul li {
float: left;
color: #fff;
background-color: #000; }
Note the li's are floated so you also need to clear them on the ul. I'd suggest a clearfix solution to do that. For example the full code could be:
ul {
display: table;
margin: 0 auto;
list-style-type: none;
background: red; }
ul li {
float: left;
color: #fff;
background-color: #000; }
.clear:before, .clear:after { content: " "; display: table; line-height: 0; }
.clear:after { clear: both; }
.clear { *zoom: 1; }
...
<ul class="clear">
<li>First item here</li>
<li>Second item here</li>
<li>Third item here</li>
</ul>