title: How to get DIVS to line up in Bootstrap row
body: <p>I'm working with Bootstrap and am creating a navbar. Here is the HMTL:</p>
  
  <pre><code>&lt;div id="root" class="container-fluid"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col-2"&gt;
       &lt;a class="nav-link" href="/menus"&gt; Menus &lt;/a&gt;&lt;/div&gt;
     &lt;div class="col-2"&gt;&lt;a class="nav-link" href="/meals"&gt; Meals &lt;/a&gt; 
        &lt;/div&gt;
     &lt;div class="col-2"&gt;&lt;a class="nav-link" href="/components"&gt; Components &lt;/a&gt;&lt;/div&gt;
     &lt;div class="col-2"&gt;&lt;a class="nav-link" href="/recipes"&gt; Recipes &lt;/a&gt;&lt;/div&gt;
     &lt;div class="col-2"&gt;&lt;a class="nav-link" href="/ingredients"&gt; Ingredients &lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Instead of lining up, the DIV's just run down the side of the screen. I know the space is being made in the browser because when I use the element inspector, I can see the 'row' and 'container-fluid' divs are stretching across the screen. I know it must be something stupid small, but I cannot find it.</p>
  
  <p>How can I correct this to make it work properly?</p>