title: Why is there whitespace separating list items from its parentr?
body: <p>This is my first time implementing the standard html nav. However, the list elements inside nav are not positioned inside nav the way I want them to be, and although I've changed most of the obvious properties that come to mind, I haven't been able to:</p>
  
  <ul>
  <li>Center the li elements inside nav</li>
  <li>Make the width of the li elements fit perfectly inside nav</li>
  </ul>
  
  <p>I don't understand why they are by default positioned so awkwardly to the right of their parent container, or why setting 'width: 100%' isn't the solution. When I set the positioning on the li elements to absolute, it seems to mucks up everything since I need each list element to be positioned relative to where the element before it is placed.</p>
  
  <p>There seems to be a few possible ways I could go about solving this problem, but they seem sort of hackish, and I'm wondering if there's a more obvious solution I lack the experience to see. </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>nav {
    width: 40%; height: 500px;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    border: 2px solid black; 
  }
  
  nav ul li {
    list-style: none; text-align: center;
    width: 99%; height: 100%;
    position: inherit;
    padding: 1%;
    border: 2px solid black;
    border-top: none;
    margin: 0;
    display: block;
    background: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;&lt;!--
    --&gt;&lt;ul&gt;&lt;!--
     --&gt;&lt;li class="user"&gt;WelcomeVids&lt;/li&gt;
        &lt;li class="user"&gt;Diablo&lt;/li&gt;
        &lt;li class="user"&gt;FreeCodeCamp&lt;/li&gt;
        &lt;li class="user"&gt;OtherStuff&lt;/li&gt;
        &lt;li class="user"&gt;Dota2&lt;/li&gt;&lt;!--
    --&gt;&lt;/ul&gt;&lt;!--
  --&gt;&lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>To see the output, view my Codepen: <a href="http://codepen.io/sentedelviento/full/grzrgR/" rel="nofollow">http://codepen.io/sentedelviento/full/grzrgR/</a></p>