My goal is to create 4 divs, each with a width of 3 columns and a 3px border. I have successfully added the columns with borders, but I can't seem to get the border-box property to work as intended. I believe that I need the border to be an inner border in order to create space between each div.
I'm facing a similar issue with trying to create 2 divs, each with 6 columns, and encountering the same problem.
<div class="container products">
<div class="row">
<!-- First featured product -->
<div class="col-lg-6 featured_product">
<div class="row">
<div class="col-lg-6"><img src="img/products/xbo_hs.png" alt=""></div>
<div class="col-lg-4 col-lg-push-1">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<button class="btn btn-primary">More Info</button>
</div>
</div>
</div><!-- End first featured product -->
<!-- Second featured product -->
<div class="col-lg-6 featured_product">
<div class="row">
<div class="col-lg-6"><img src="img/products/xbo_hs.png" alt=""></div>
<div class="col-lg-4 col-lg-push-1">
<ul>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<button class="btn btn-primary">More Info</button>
</div>
</div>
</div><!-- End second featured product -->
</div>
.products {
padding-top: 30px;
.featured_product {
border: 5px solid #1488c8;
box-sizing: border-box;
-moz-box-sizing: border-box;
ul {
list-style-type: disc;
padding-top: 5%;
padding-bottom: 5%;
}
button {
width: 100%;
}
}