title: Unordered list not aligning all the way to the left in a div
body: <p>I have an unordered list that I am using as a simple navigation bar. That looks like below:</p>
  <p><img src="https://i.stack.imgur.com/BnLDr.png" alt="enter image description here" /></p>
  <p>As you can see though that <code>&lt;li&gt;</code> elements are not aligning all the way to the left of the <code>&lt;div&gt;</code> they are contained in. I have tried <code>text-align: left;</code> in the containing <code>&lt;div&gt;</code> but that seems to have no effect.</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>    #menu {
          width: 800px;
          margin: 0 auto;
      }
      
      #menu div {
          float: left;
          width: 400px;
          height: 60px;
          background-color: #CACACA;
      }
      
      #menutop {
          text-align: left;
      }
      
      #menutop ul {
          list-style: none;
      }
      
      #menutop li {
         display: inline;
         padding: 10px;
      }
      
      #menutop a {
          color: #000000;
          text-decoration: none;
      }
      
      #menutop a:hover {
          text-decoration: underline;
      }
        </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div id="menu"&gt;                                                                         
          &lt;div id="menutop"&gt;                                                                  
              &lt;ul&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;/ul&gt;                                                                           
          &lt;/div&gt;     </code></pre>
  </div>
  </div>
  </p>
  <p>Any ideas?</p>