As I work on building a landing page for a new startup, I encountered an issue with the layout. I am using a carousel in the "hero section," and everything seemed to be working fine until I attempted to add the next section. To my surprise, the next section appeared BEHIND the hero section instead of below it. I have tried analyzing my code and making adjustments using Chrome Dev Tools, but I am unable to pinpoint the problem. Can someone offer any assistance?
I have attempted changing the position of all items in the carousel to static and setting their display to block to see if it resolves the issue, but unfortunately, it did not.
CODE:
HTML
<section id='hero-section'>
<div class="hero-carousel carousel slide" data-ride="carousel">
<div class="carousel-item active" data-interval="8000">
<img class="d-block w-100" src="includes/media/images/slide1.png" alt="">
<div class="carousel-caption d-none d-md-block">
<h2>Achieve your dreams</h2>
<p>Axelera payroll loans are easy to get and repay</p>
<button class='cta-button btn btn-md' type="button" name="button">Apply for your loan</button>
</div>
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="includes/media/images/slide2.png" alt="">
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="includes/media/images/slide3.png" alt="">
</div>
</div>
</section>
<section>
<h2>Test</h2>
</section>
CSS
.carousel-item img{
height: 500px;
object-fit: cover;
}
The next section (with the "test" h2 tag) should appear below the hero section, not behind it.