title: Remove white space on ul with css
body: <p>I'm trying to remove some white space on the left of a fixed top menu <code>ul</code> but I'm stuck, I already searched and put this:</p>
  
  <pre class="lang-css prettyprint-override"><code>#nav li {
      list-style: none;
      display: inline-block;
  }
  </code></pre>
  
  <p>I want to put all the list at the left (like <code>left: 0</code>?), but something is producing some white space on the left of the first list item.</p>
  
  <p>Why is this happening, and how can I remove it?</p>
  
  <p>Here is the code (<a href="http://jsfiddle.net/kPRv6/1/" rel="noreferrer">fiddle</a>):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#contenedormenu {
    background-color: #FFFFFF;
    width: 100%;
    position: fixed;
    top: 0px;
    box-shadow: 0px 1px 2px #888;
    height: 40px;
    z-index: 1;
  }
  #menu {
    width: 100%;
    height: 40px;
    position: fixed;
    top: 0px;
  }
  #nav {
    width: 100%;
    height: 40px;
    top: 0px;
    position: fixed;
    margin-top: 0px;
  }
  #nav li {
    margin-top: 10px;
    list-style: none;
    display: inline-block;
  }
  #nav li a {
    color: #5D5D5D;
    font-family: Lobster, Arial, sans-serif;
    font-size: 16px;
    padding: 10px 5px 12px 5px;
    text-decoration: none;
    text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 0;
  }
  #nav a:hover {
    background-color: #f15a24;
    color: white;
    text-shadow: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="contenedormenu"&gt;
    &lt;div id="menu"&gt;
      &lt;ul id="nav"&gt;
        &lt;li id="inicio"&gt;
          &lt;a href="#home" title="Home"&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="item1"&gt;
          &lt;a href="#home"&gt;Menu item 2&lt;/a&gt;
        &lt;/li&gt;
        &lt;li id="item2"&gt;
          &lt;a href="#home"&gt;Menu Item 3&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>