title: Bootstrap 4: weird gap between columns
body: <p><a href="https://i.stack.imgur.com/YtioK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YtioK.png" alt="enter image description here"></a></p>
  
  <p>In the style I'm trying to make, I have a container under the Jumbotron here. The container is filled with a row, which contains everything here. The row is split into two columns - the box with 'hay', and the navbar underneath. Another column holds the main part with the getting started stuff. As you can see the column doesn't stretch properly to the end of the container.</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-html lang-html prettyprint-override"><code>            &lt;div class="col content-body"&gt;
                &lt;div class="row"&gt;
                  &lt;h1&gt;Getting Started&lt;/h1&gt;
                  &lt;div class="bd-callout bd-callout-info"&gt;
                          &lt;h4&gt;Primary Callout&lt;/h4&gt;
                          This is a primary callout. And some interesting stuff might be occuring here.
                          &lt;p&gt; Due to recent events we have taken&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I started out with a different html code though, and the difference was that the main content with 'getting started' was contained only in a column, and not surrounded by a row div.</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-html lang-html prettyprint-override"><code>            &lt;div class="col content-body"&gt;
                  &lt;h1&gt;Getting Started&lt;/h1&gt;
                  &lt;div class="bd-callout bd-callout-info"&gt;
                          &lt;h4&gt;Primary Callout&lt;/h4&gt;
                          This is a primary callout. And some interesting stuff might be occuring here.
                          &lt;p&gt; Due to recent events we have taken&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and the result was</p>
  
  <p><a href="https://i.stack.imgur.com/ZxE2J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZxE2J.png" alt="enter image description here"></a></p>
  
  <p>Here the whole content part is shifted by a gap..</p>
  
  <p>I'm new to bootstrap and for the life of me can't figure out what's going on. I have very little custom css, and almost none of it modifies margins or padding (I've tested it all). I've also tried inserting an inbetween column (such that they all add up to 12) - the middle and content column line up well, but the little gap remains and both are stiff shifted by the amount of the gap.</p>
  
  <p>How do I get it to align properly? Thank you.</p>
  
  <p>Here is the fiddle for the entire thing as suggested: <a href="https://jsfiddle.net/0v8fL5fz/1/" rel="nofollow noreferrer">https://jsfiddle.net/0v8fL5fz/1/</a></p>