My goal is to center my "Jumbotron" at the top, with my picture on the left and carousel on the right. However, all my content keeps floating to the left. Despite using Bootstrap 5 with flexbox, I can't seem to get everything centered properly.
This is the HTML structure I am working with:
<section>
<div class="hero">
<div class="row" style="max-width: 1220px;">
<div class="content text-center">
<div class="value-prop text-center">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-success btn-lg" href="#" role="button">Learn more</a>
</div>
<div class="hero-row d-flex">
<div class="hero-img-container d-flex text-center align-items-center" style="margin: 0 auto; width: 84%;">
<img style="max-width: 100%; height: auto;" src="../img/hp_hero_note@2x__en.png" height="800" />
</div>
<div class="carousel-container d-flex align-items-center" style="width: 16%; min-width: 240px;">
<div class="hero-carousel-texts slick-initialized slick-slider slick-dotted">
(carousel content goes here)
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I would appreciate any tips on how to better master layouts in this context!