Bootstrap carousel out of document flow? - html

Question

i'm currently developing a landing page for a startup, while i was making the "hero section" i wanted to use a carousel, everything worked fine until i tried adding the next section, to my surprise the next section was BEHIND the hero section, i tried reading through my code and tweaking a bit on chrome dev tools but i can't seem to find the problem, could you help me?
I've tried changing the position for all of the items in the carousel to static and their display to block to see if it went back to normal without success.
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>Alcanza tus sueños</h2>
<p>Los créditos de nómina Axelera son fáciles de obtener y de pagar</p>
<button class='cta-button btn btn-md' type="button" name="button">Solicita tu crédito</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 (the one with the h2 "test" tag) should be below not behind the other section.

Answer 1

Just add the Bootstrap class clearfix and you are good to go!
.carousel-item img{
height: 500px;
object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="clearfix" 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="https://via.placeholder.com/960x500" alt="">
<div class="carousel-caption d-none d-md-block">
<h2>Alcanza tus sueños</h2>
<p>Los créditos de nómina Axelera son fáciles de obtener y de pagar</p>
<button class='cta-button btn btn-md' type="button" name="button">Solicita tu crédito</button>
</div>
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
</div>
<div class="carousel-item" data-interval="8000">
<img class="d-block w-100" src="https://via.placeholder.com/960x500" alt="">
</div>
</div>
</section>
<section class="clearfix">
<h2>Test</h2>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>