title: Making Full Width Navs with Materialize
body: <p>I am struggling to get my navbar full width. Lines 3 - 17.</p>
  
  <p>I am using materialize package for my framework: <a href="https://materializecss.com/" rel="nofollow noreferrer">https://materializecss.com/</a></p>
  
  <p>After googling different results like "width: 100%", and "s12" for full width I have been able to get close, but I'm still having margin/padding issues where there is this mysterious sliver of space on both sides.</p>
  
  <p>I've also tried margin-left=0 and margin-right=0 yet still no effect.</p>
  
  <p>I've also tried setting margins to negatives, but I am getting no effect.</p>
  
  <p>Here is the code I am using:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
  &lt;div class="row"&gt;
    &lt;div class="col s12"&gt;
      &lt;nav&gt;
        &lt;div class="nav-wrapper deep-purple darken-1"&gt;
            &lt;form&gt;
              &lt;div class="input-field l8"&gt;
                &lt;input id="search" type="search" required&gt;
                &lt;label class="label-icon" for="search"&gt;&lt;i class="material-icons"&gt;search&lt;/i&gt;&lt;/label&gt;
                &lt;i class="material-icons"&gt;close&lt;/i&gt;
              &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  
      &lt;footer class="page-footer deep-purple darken-1"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col l6 s12"&gt;
              &lt;h5 class="white-text"&gt;Footer Content&lt;/h5&gt;
              &lt;p class="grey-text text-lighten-4"&gt;You can use rows and columns here to organize your footer content.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col l4 offset-l2 s12"&gt;
              &lt;h5 class="white-text"&gt;Links&lt;/h5&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a class="grey-text text-lighten-3" href="#!"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="grey-text text-lighten-3" href="#!"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="grey-text text-lighten-3" href="#!"&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="grey-text text-lighten-3" href="#!"&gt;Link 4&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="footer-copyright  deep-purple darken-4"&gt;
          &lt;div class="container center-align"&gt;
            &lt;div class="row valign-wrapper"&gt;
              &lt;div class="col s7"&gt;
                © 2018 Copyright
              &lt;/div&gt;
              &lt;div class="col valign-wrapper"&gt;
                Tutor? Sign Up Here! &amp;nbsp
                &lt;a class="waves-effect waves-light orange btn right"&gt;Post Job&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/footer&gt;
  </code></pre>
  
  <p></p>
  
  
  
  
  
  <p><a href="https://i.stack.imgur.com/t40yb.png" rel="nofollow noreferrer">Screenshot of my site</a></p>
  
  <p>What is even more frustrating is that I have successfully gotten the footer to wrap across the screen.</p>
  
  <p>Any advice appreciated!</p>