title: Navigation bar won't entirely fill screen width
body: <p>I've started making a navigation bar using the nav tag, which worked perfectly.  Using CSS, I set the width of my nav tag to 100%, as well as the border and padding set to 0. </p>
  
  <p>I seem to have a few pixels on each side of the nav bar that aren't getting filled. I want the entire width to be covered with the nav bar, but I can't get it to work. Here is my html:</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="home.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;
              &lt;a href="test1.html"&gt;Test1 &lt;span class="carrot"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;div&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="test#testA"&gt;TestA&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="test.html#B"&gt;TestB&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="teset.C"&gt;TestC&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="test2.html"&gt;Test2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="test3.html"&gt;Test3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>nav {
      background-color: #fff;
      border: 1px solid #dedede;
      border-radius: 4px;
      box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
      color: #888;
      display: block;
      margin: 8px 22px 8px 22px;
      overflow: hidden;
      width: 100%; 
      margin: 0;
      padding: 0;
  }
  </code></pre>
  
  <p>What can I do to fix this?</p>
  
  <p><img src="https://i.stack.imgur.com/syLDV.png" alt="http://i.stack.imgur.com/syLDV.png"> </p>