Making Full Width Navs with Materialize

Question

I am struggling to get my navbar full width. Lines 3 - 17.

I am using materialize package for my framework: https://materializecss.com/

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.

I've also tried margin-left=0 and margin-right=0 yet still no effect.

I've also tried setting margins to negatives, but I am getting no effect.

Here is the code I am using:

<div class="container">

<div class="row">
  <div class="col s12">
    <nav>
      <div class="nav-wrapper deep-purple darken-1">
          <form>
            <div class="input-field l8">
              <input id="search" type="search" required>
              <label class="label-icon" for="search"><i class="material-icons">search</i></label>
              <i class="material-icons">close</i>
            </div>
          </form>
      </div>
    </nav>
  </div>  
</div>

    <footer class="page-footer deep-purple darken-1">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">Footer Content</h5>
            <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright  deep-purple darken-4">
        <div class="container center-align">
          <div class="row valign-wrapper">
            <div class="col s7">
              © 2018 Copyright
            </div>
            <div class="col valign-wrapper">
              Tutor? Sign Up Here! &nbsp
              <a class="waves-effect waves-light orange btn right">Post Job</a>
            </div>
          </div>
        </div>
      </div>
    </footer>

Screenshot of my site

What is even more frustrating is that I have successfully gotten the footer to wrap across the screen.

Any advice appreciated!

Answer 1

Remove the container and col s12 from the nav bar, keep it like this, Hope this helps

<div class="row">
    <nav>
      <div class="nav-wrapper deep-purple darken-1">
          <form>
            <div class="input-field l8">
              <input id="search" type="search" required>
              <label class="label-icon" for="search"><i class="material-icons">search</i></label>
              <i class="material-icons">close</i>
            </div>
          </form>
      </div>
    </nav>
</div>