I've implemented Bootstrap's grid system to showcase two rows, each containing two images. Here is the code:
<section class="container">
<div class="row">
<figure class="column-sm-6">
<p>floor plan</p>
<img src="floorplan.jpg">
</figure>
<figure class="column-sm-6">
<p>kitchen</p>
<img src="kitchen.jpg">
</figure>
</div>
<div class="row">
<figure class="column-sm-6">
<p>outdoor bath</p>
<img src="outdoorbath.jpg">
</figure>
<figure class="column-sm-6">
<p>bedrooms</p>
<img src="bedroom.jpg">
</figure>
</div>
</section>However, when running the code snippet, the images are overlapping. What could be causing this issue?