title: Using Gutters in Bootstrap 4 Layout
body: <p>I'm trying to use Bootstrap 4 to create a layout that has a gutter on each side. This layout has a nav row and a subnav row. I'm trying to create something that looks like this:</p>
  
  <pre><code>+-----------------------------------------------------------------------+
  |      Welcome                                              Monday      |
  +-----------------------------------------------------------------------+
  |      Home                                             11.27.2017      |
  +-----------------------------------------------------------------------+
  |      Content will go here and wrap multiple lines and fill up the     |
  |      screen.                                                          |
  |                                                                       |
  |                                                                       |
  |                                                                       |
  |                                                                       |
  +-----------------------------------------------------------------------+
  </code></pre>
  
  <p>I want to use the <code>nav</code> element for styling. In addition, I want to collapse the second row on mobile, which is another reason to use the <code>nav</code> element. Still, I can't seem to figure out how to use a gutter when in desktop mode. When I use a <code>row</code>, it doesn't use the full available width. Currently, I'm using the following code:</p>
  
  <pre><code>&lt;div style="background-color:#eee;"&gt;
    &lt;nav class="navbar navbar-dark bg-dark"&gt;
      &lt;a class="navbar-brand text-light" href="#"&gt;Welcome&lt;/a&gt;
  
      &lt;ul class="list-inline navbar-nav d-inline"&gt;
        &lt;li class="list-inline-item nav-item"&gt;Today is Monday&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  
    &lt;nav class="navbar navbar-light" style="background-color:#fff !important;"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-1"&gt;&lt;/div&gt;
        &lt;div class="col-8"&gt;Home&lt;/div&gt;
        &lt;div class="col-2 float-right"&gt;11.27.2017&lt;/div&gt;
        &lt;div class="col-1"&gt;&lt;/div&gt;      
      &lt;/div&gt;              
    &lt;/nav&gt;
  
    &lt;div class="row mx-0"&gt;
      &lt;div class="col-10 offset-1" style="height:400px;"&gt;
        Content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I create a layout that includes gutters, while still using nav elements in Bootstrap 4?</p>