html5 - how to centering the content when shrink the window in css3 -

here code navigation:

<div class="wrapper">         <header>             <nav class="nav">                 <ul>                     <li><a href="#">home</a></li>                     <li><a href="#">company</a></li>                     <li><a href="#">markets/solutions</a></li>                     <li><a href="#">products/services</a></li>                     <li><a href="#">businesses</a></li>                     <li><a href="#">investors</a></li>                 </ul>             </nav>             </header>             </div> 

css3:

*{     box-sizing:border-box; } body{     margin:0;     padding:0;     font-family:verdana;     font-size:12px; } .wrapper{     margin-left:auto;     margin-right:auto; } nav ul{     background-color: red;  } nav ul li{     display:inline-block;     padding:15px;  } nav ul li a{     text-decoration: none;     color: #ffffff; } nav ul li:first-child:hover{     text-decoration: underline;     background-color:none; } nav ul li:hover{     background-color:#000; } 

jsfiddle:

http://jsfiddle.net/ubz7lcft/6/

i need when normal window: http://imgur.com/ducp3vm , , need when shrink window http://imgur.com/lhly1xc

plase me fix this, tried possible ways..

thanks in advance.

i'm not sure asking, adding:

text-align: center; 

to .wrapper want?

edit: limit cases screen 700px wide or wider, example:

@media (min-width: 700px) {     .wrapper {         text-align: center;     } }