title: Bootstrap container. Col & row overflowing container?
body: <p>Why is my container not containing the row/columns here when I introduce padding? Container has a black border and the row / col have yellow / white respectively.</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="container border border-dark"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col" style="border: dotted 1px blue"&gt;
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit aliquid asperiores cumque ducimus quae facilis sit molestiae ullam nam voluptates odit accusantium fugiat corrupti non quaerat voluptatem qui,
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col border border-info" style="border: dotted 1px blue"&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex &lt;/div&gt;
          &lt;div class="col border border-info" style="border: dotted 1px blue"&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas, debitis dignissimos nostrum commodi iure optio nulla sapiente, modi voluptatibus nam, sed maxime doloribus hic quaerat perferendis ex &lt;/div&gt;
          &lt;div class="col border border-info" style="border: dotted 1px blue"&gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis at ea facere magni similique eveniet corrupti commodi amet id ad asperiores minus laborum necessitatibus, iusto incidunt vero deserunt qui &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/WMc8f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WMc8f.png" alt="enter image description here" /></a></p>