I'm encountering an issue with Bootstrap 4. The left box isn't aligning properly with the right box. This involves both HTML and CSS. How can I go about resolving this issue?
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Section Title</h1>
</div>
<div class="col-md-6">
<div class="left-box">
<img src="images/category-1.jpg" alt="" class="img-fluid">
</div>
<div class="left-box">
<img src="images/category-2.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-md-6">
<div class="right-box">
<img src="images/category-3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
CSS:
.left-box{ position:relative; padding-top:30px;}
.right-box{position:relative; padding-top:30px;}
Appreciate any help in advance.