Hi for some reason the bottom section i have made in my HTML is appearing above the section before it does anybody have a reason why this could be happening
<!--Products Start-->
<section>
<div class="pad-200" style="margin-top: 120px;">
<h3 class="h3-eyebrow">Lorem Ipsum Dolor</h3>
<h2>Our Products</h2>
</div>
<div class="pad-300">
<p class="text-indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie sollicitudin malesuada. Quisque et orci neque. Proin ullamcorper sit amet ex ut finibus. Aliquam lacinia non justo or sit amet, consectetur adipiscing elit.</p>
</div>
<!--Product 1-->
<div class="product-section">
<div class="row">
<div class="column left" style="text-align: center; padding: 50px;">
<img src="/assets/images/product-lincoln-red.svg" alt="" style="margin-bottom: 20px;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elementum ligula, non fringi.</p>
<button class="gray-outline-btn">Read More</button>
<button class="gray-inline-btn">Buy Now</button>
</div>
<div class="column right">
<div style="margin-top: -50px;">
<img src="assets/images/pictures/jez-timms-48940-unsplash.jpg" alt="" width="100%">
</div>
</div>
</div>
</div>
<!--Product 2-->
<div class="product-section">
<div class="row">
<div class="column left" style="text-align: center; padding: 50px;">
<img src="/assets/images/product-the-rectory.svg" alt="" style="margin-bottom: 20px;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elementum ligula, non fringi.</p>
<button class="gray-outline-btn">Read More</button>
<button class="gray-inline-btn">Buy Now</button>
</div>
<div class="column right">
<div style="margin-top: -50px;">
<img src="assets/images/pictures/nik-lanus-41808-unsplash.jpg" alt="" width="100%">
</div>
</div>
</div>
</div>
<!--Product 3-->
<div class="product-section">
<div class="row">
<div class="column left" style="text-align: center; padding: 50px;">
<img src="/assets/images/product-lincoln-red.svg" alt="" style="margin-bottom: 20px;" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum elementum ligula, non fringi.</p>
<button class="gray-outline-btn">Read More</button>
<button class="gray-inline-btn">Buy Now</button>
</div>
<div class="column right">
<div style="margin-top: -50px;">
<img src="assets/images/pictures/markus-spiske-1050317-unsplash.jpg" alt="" width="100%">
</div>
</div>
</div>
</div>
</section>
<!--Products End-->
<!--Explore Start-->
<section>
<div class="explore-section">
<div class="pad-100">
<h3 class="h3-eyebrow-alt">Lorem Ipsum Dolor</h3>
<h2>Explore Around Us</h2>
</div>
</div>
</section>
<!--Explore End-->