title: Bootstrap 4 columns overflowing instead of resizing
body: <p>I've read 5-6 question / answers but can't find what I'm looking for _ 
  Bootstrap 4 columns aren't behaving the way I expect them to. Below about 600px device width the edge overflows instead of continuing to reduce in size</p>
  
  <p><a href="https://i.stack.imgur.com/5Tl12.png" rel="nofollow noreferrer">at 618px the columns are still reducing</a> </p>
  
  <p><a href="https://i.stack.imgur.com/Z6VwB.png" rel="nofollow noreferrer">at 538px the columns are overflowing</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
     &lt;div class="row"&gt;
         &lt;div class="col-lg-9 col-md-12"&gt;
             &lt;div class="outerDivBorder" id="photoBox"&gt;
                 &lt;div style="height: 10em;"&gt;&lt;/div&gt; 
             &lt;/div&gt;&lt;!-- /#photoBox --&gt;
         &lt;/div&gt;
  
         &lt;div class="col-lg-3 col-md-12"&gt;
              &lt;div class="outerDivBorder" id="dataBox"&gt;
                  &lt;div style="height: 10em;"&gt;&lt;/div&gt; 
              &lt;/div&gt;&lt;!-- /#dataBox --&gt;
         &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.container --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.outerDivBorder {
      width: 100%;
      border: 1px solid #454343;
      padding: 0 1rem;
      margin: 1rem;
      margin-top: 1.5rem;
      margin-bottom: 2rem;
  }
  </code></pre>
  
  <p>Thanks in advance for any guidance offered on this : )</p>