Bootstrap 4 columns overflow instead of resizing

Question

I read 5-6 questions / answers, but can not find what I am looking for _ Bootstrap 4 columns do not behave the way I expect them. Below the width of the 600px device, the edge overflows, not decreases in size

618px columns still dropping

538px columns are full

HTML:

<div class="container">
   <div class="row">
       <div class="col-lg-9 col-md-12">
           <div class="outerDivBorder" id="photoBox">
               <div style="height: 10em;"></div> 
           </div><!-- /#photoBox -->
       </div>

       <div class="col-lg-3 col-md-12">
            <div class="outerDivBorder" id="dataBox">
                <div style="height: 10em;"></div> 
            </div><!-- /#dataBox -->
       </div>
   </div>
</div><!-- /.container -->

CSS

.outerDivBorder {
    width: 100%;
    border: 1px solid #454343;
    padding: 0 1rem;
    margin: 1rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

Thanks in advance for any advice on this :)

Answer 1

You put margin: 1rem;in .outerDivBorder, and this marker pushes content on small screens. Instead, use padding on col- this can be done using the utility class to populate, py-3in this case:

.outerDivBorder {
    width: 100%;
    border: 1px solid #454343;
    padding: 0 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
       <div class="col-lg-9 col-md-12 py-3">
           <div class="outerDivBorder" id="photoBox">
               <div style="height: 10em;"></div> 
           </div>
       </div>
       <div class="col-lg-3 col-md-12 py-3">
            <div class="outerDivBorder" id="dataBox"> 
                <div style="height: 10em;"></div> 
            </div>
       </div>
   </div>
</div>

Run codeHide result