title: Navbar not expanding to fill width of page
body: <p>I am making a website and I want it to look nice when being used on mobile. However, I can't figure out to eliminate the excess white space on the right of the <code>navbar</code>.</p>
  
  <p><strong>Picture of the problem:</strong></p>
  
  <p><img src="https://i.imgur.com/mCxDGz0.png" alt="Picture of the problem"></p>
  
  <p>I have tried messing with the <code>CSS</code> of <code>body</code> and <code>nav</code> tags. Also, I tried to <code>wrap</code> sections of the code with <code>div class="container-fluid"&gt;</code>.</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>a:hover {
    color: hotpink;
  }
  
  nav {
    background-color: #009fe3;
    width: 100%;
    box-sizing: content-box;
  }
  
  body {
    margin: 0;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navbar navbar-expand-lg navbar-dark"&gt;
    &lt;div class='container-fluid'&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarNavAltMarkup"&gt;
        &lt;div class="navbar-nav"&gt;
          &lt;a class="nav-item nav-link" href="/"&gt;A&lt;/a&gt;
          &lt;a class="nav-item nav-link" href="/f3"&gt;B&lt;/a&gt;
          &lt;a class="nav-item nav-link" href="/f2"&gt;C&lt;/a&gt;
          &lt;a class="nav-item nav-link" href='/f4'&gt;D&lt;/a&gt;
          &lt;a class="nav-item nav-link active" href="/f1"&gt;E&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;a class="nav-item nav-link" href="/f5"&gt;F&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;div class='container-fluid'&gt;
    &lt;br&gt;
    &lt;h2&gt;Heading&lt;/h2&gt;&lt;small&gt;some url&lt;/small&gt;
    &lt;table class="table table-hover"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;h2&gt;Another heading&lt;/h2&gt;&lt;small&gt;Another url&lt;/small&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;th scope="col"&gt;Consectetur&lt;/th&gt;
          &lt;th scope="col"&gt;Adipiscing &lt;/th&gt;
          &lt;th scope="col"&gt;Tristique&lt;/th&gt;
          &lt;th scope="col"&gt;Porttitor &lt;/th&gt;
          &lt;th scope="col"&gt;Eleifend &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
        &lt;tr&gt;
          &lt;td&gt;vitae volutpat&lt;/td&gt;
          &lt;td&gt;Duis mollis&lt;/td&gt;
          &lt;td&gt;Nulla ultricies&lt;/td&gt;
          &lt;td&gt;Vestibulum eleifend&lt;/td&gt;
          &lt;td&gt;quis nibh&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When viewing this <code>HTML</code> using the Chrome Developer tool on the mobile (phone) view, there is lots of white space to the right of the navbar. But, I would like to eliminate all the white space and make it so the navbar expands to fill the space. This would end up looking a lot better when people access the website using their phones.</p>