css - Auto width when add list -

i have simple menu (centered margin:0 auto) list items. now, i'm trying keep menu on same centered position when add additional list items. here fiddle play 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 additional li's ul wrap , still centered.

i don't want use flexbox because ie doesn't support :d

the problem solved. giving ul {display:table} thank all,especially coop ! 

not sure if you're after i've had issues centering nav menus , came solution:

ul{   display: table;   margin: 0 auto;   list-style-type: none;   background: red; }  ul li {   float: left;   color: #fff;   background-color: #000; } 

note li's floated need clear them on ul. i'd suggest clearfix solution that. example full code 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>