<div id="Container">
  <ul>               
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>    
  </ul>
</div>

@media screen and (min-width: 550px) {  
   #Container{width:100%;height:200px; text-align:center; }   
   ul{list-style:none; width:100%;height:100%; background:gray;margin:0; padding:0;}
   ul li{width:21.25%;height:42.5%; display:inline-block; margin:0; padding:5% 0; background:blue}
   li + li{padding-left:5%;}   
 }

@media screen and (min-width: 900px) {  
  html, body{margin:0}
   #Container{width:100%;height:100px; text-align:center;}   
   ul{list-style:none; width:100%;height:100%; background:gray;        margin:0; padding:0;}
   ul li{width:10.75%;height:100%; display:inline-block; margin:0;      padding:0; background:blue}
   ul li:first-child{margin:0;float:left}
   ul li:last-child{margin:0;}
   li + li{margin-left:2%; float:right}
  }