title: CSS <li> tag styling
body: <p>I'm trying to get my list tags to be displayed 2x2 per line thus far I am using margins to in order to position them correctly how I want. 
  Theres got to be a simpler way to do this without the use of margins?</p>
  
  <p>Below is the code that I have used and a jsfiddle which shows what I've got so far, to be fair I'm happy with how its styled just not happy with the way I've coded the style. I can't help but think that theres a simpler way to do it.</p>
  
  <p>JS fiddle: <a href="http://jsfiddle.net/tNQE3/" rel="nofollow">http://jsfiddle.net/tNQE3/</a></p>
  
  <pre><code>&lt;section id="maincontent"&gt;
  &lt;div id="wrap"&gt;
      &lt;ul&gt;
  &lt;li id="games" class="nav"&gt;&lt;a href="#"&gt;Games&lt;/a&gt;&lt;/li&gt;
      &lt;li id="music" class="nav"&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;
      &lt;li id="movies" class="nav"&gt;&lt;a href="#"&gt;Movies&lt;/a&gt;&lt;/li&gt;
      &lt;li id="tv" class="nav"&gt;&lt;a href="#"&gt;TV&lt;/a&gt;&lt;/li&gt;  
      &lt;li id="sport" class="nav"&gt;&lt;a href="#"&gt;Sport&lt;/a&gt;&lt;/li&gt;      
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
  #wrap ul {
  padding:40px 40px 40px 100px;   
  }
  
  #wrap li {
  border: 1px solid #333333;
  border-radius: 15px;
  height:200px;
  width:300px;
  background:#ebebeb;
  padding: 10px 0px 0px 20px;
  text-align:center;
  }
  
  #wrap li#games {
   margin: 0px 0px 0px 30px;
   background-image:url(../img/controller.png);
   background-size: 30px 30px;
   background-repeat:no-repeat;
   background-position: 80px;
   padding: 10px 0 0 34px; 
  }
  
  
  #wrap li#music {
  margin: -210px 0px 0px 400px;
   background-image:url(../img/music.png);
   background-position: 80px;
   background-size: 30px 30px;
   background-repeat:no-repeat;  
  padding: 10px 0 0 34px;
  }
  
  #wrap li#movies {
  background-image:url(../img/video.png);
   background-size: 30px 30px;
   background-position: 80px;
   background-repeat:no-repeat;  
  padding: 10px 0 0 34px;
  margin: 20px 0px 0px 30px;
  }
  
  #wrap li#tv {
   background-image:url(../img/tv.png);
   background-size: 30px 30px;
   background-position: 80px;
   background-repeat:no-repeat;  
  padding: 10px 0 0 34px;
  margin: -210px 0px 0px 400px;
  }
  
  #wrap li#sport {
  background-image:url(../img/sport.png);
   background-size: 30px 30px;
   background-position: 80px;
   background-repeat:no-repeat;  
  padding: 10px 0 0 34px;
  margin: 20px 0px 0px 30px;
  
  }
  </code></pre>