title: Can't set margins to zero in a responsive menu
body: <p>I tried to make a responsive header for my website, it's all ok, but i can not set the margins of the links to 0. You cand see in the image: <a href="https://imgur.com/s5EzL6n" rel="nofollow noreferrer">https://imgur.com/s5EzL6n</a></p>
  
  <p>What i want to achieve is to make all that grey background 100% width. </p>
  
  <p>I followed this youtube video: <a href="https://www.youtube.com/watch?v=lYw-FE60Dws" rel="nofollow noreferrer">https://www.youtube.com/watch?v=lYw-FE60Dws</a></p>
  
  <p>I probably set some things wrong, i am sure, but i am a beginner.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
      &lt;div class="container"&gt;
          &lt;div id="branding"&gt;
              &lt;a href="index.html"&gt;&lt;img src="logo.png"&gt;&lt;/a&gt;
              &lt;a class="toggle"&gt;Meniu&lt;/a&gt;
          &lt;/div&gt;
          &lt;nav&gt;
              &lt;ul class="active"&gt;
                  &lt;li class="current"&gt;&lt;a href="index.html"&gt;Acasă&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="despre.html"&gt;Despre&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="servicii.html"&gt;Servicii&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="proiecte.html"&gt;Proiecte&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    /* responsive header*/
  
  .toggle{
      display: none;
      position: absolute;
      right: 10px;
      top: 26px;
      padding: 5px;
      cursor: pointer;
      text-decoration: none;
  }
  
  @media (max-width: 940px){
  
      .toggle{
          display: block;
      }
  
      header .toggle{
          padding: 0 0;
          font-size: 18px;
      }
  
      header ul li{
          display: block;
          width: 100%;
          background-color: grey;
      }
  
      header ul.active{
          display: block;
      }
  
      header ul li a{
          display: block;
          text-align: center;
      }
  
      header nav{
          margin: 0;
          width: 100%;
      }
  
      header ul li{
          width: 100%;
      }
  
  }
  
  /*normal page*/
  header a{
      color: #fcfcfc;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 16px;
      padding-right: 25px;
  }
  
  
  header li{
      float: left;
      display: inline;
      padding: 0 20px 0px 20px;
  }
  
  header #branding{
      float: left;
      height: 90px;
      margin-left: 35px;
  }  
  
  header a{
  color: #fcfcfc;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  padding-right: 25px;
  }
  </code></pre>