title: ul >li style and keeping it inside one line
body: <p>I'm trying to create a menu list item which has 4 items but it doesn't feed inside one line for some reason. I tried nested it with nested divs but had no luck. The problem starts to happen when I added the <code>padding: 10px;</code>. </p>
  
  <p>Here is the latest HTML and CSS I have:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Info&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#menu {
      margin: 0;
      padding: 0;
  }
  
  #menu li {
      display: block;
      float: left;
      margin: 0;
      width: 25%;
      background-color: gray;
      padding: 10px;
  }
  </code></pre>
  
  <p>I also have a jsfiddle for that: <a href="http://jsfiddle.net/GLh92/1/" rel="nofollow">http://jsfiddle.net/GLh92/1/</a></p>
  
  <p>As you can see, it doesn't fit inside the one line. I also have a responsiveness concern here. So, it needs to fit inside one line for different screen resolutions.</p>
  
  <p>Any idea how this can be done in a clean way?</p>