title: How to move all li elements to the left side of the <ul> element?
body: <p>I want to move all <strong>li</strong> elements to the left side of the <strong>ul</strong> element.
  It looks like the first <strong>li</strong> element has a left margin >0 which I don't understand.</p>
  
  <p>Do you know how I can fix this?</p>
  
  <p>The ultimate goal is: the first <strong>li</strong> element #music and #email element in the footer have the same left margin of 70px (same distance from the left border).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    text-align: center;
  }
  
  header {
    overflow: hidden
  }
  
  nav {
    overflow: hidden;
    display: inline-block;
    float: left;
    margin-left: 70px;
  }
  
  nav li {
    margin-right: 70px;
    float: left;
  }
  
  nav ul {
    list-style: none;
    overflow: hidden
  }
  
  #email {
    float: left;
    padding: 25px 0px;
    margin-left: 70px;
  }
  
  .wrapper {
    border: 2px solid green;
  }
  
  #menu2 {
    float: right;
    margin-right: 70px;
    border: 2px solid green;
  }
  
  ul {
    margin-top: 0px;
    margin-bottom: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;header&gt;
      &lt;nav id="menu"&gt;
        &lt;ul&gt;
          &lt;li id="music"&gt;
            &lt;a href="#"&gt;&lt;img src="gfx/music40.gif"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="film"&gt;
            &lt;a href="#"&gt;&lt;img src="gfx/film40.gif"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="visual"&gt;
            &lt;a href="#"&gt;&lt;img src="gfx/visual40.gif"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li id="media"&gt;
            &lt;a href="#"&gt;&lt;img src="gfx/media40.gif"&gt;&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div id="menu2"&gt;
        &lt;a id="logo" href="index.html"&gt;&lt;img src="gfx/tobera40.gif" alt="logo" class="logo"&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  
    &lt;div id="main"&gt;
      &lt;img src="gfx/banner40.jpg"&gt;
    &lt;/div&gt;
  
  
    &lt;footer&gt;
      &lt;div id="email"&gt;
        &lt;img src="email.jpg"&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>