Content not aligning to the center - html

Question

Im trying to get my "Jumbotron" centered at the top and beneath it have my picture to the left and carousel on the right.
Why does all my content float to the left? Im trying to get everything centered but cant quite make it work.
Im using Bootstrap 5, with flexbox
https://codepen.io/spacemonki87/pen/VwbvogM
HTML:
<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">
<div aria-live="polite" class="slick-list draggable">
<div class="slick-track">
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
<div class="hero-carousel-text slick-slide slick-cloned">
<div class="heading">
<p class="p-title hero-carousel-text-heading">FIND THINGS FAST</p>
</div>
<div class="description">
<p class="p-small">Get what you need, when you need it. Search gives you results as you type.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Any tips on mastering layouts is greatly appreciated

Answer 1

You could just add mx-auto class to first child of div.hero. This will set margin-left and margin-right to auto, centering the contents of the page.
<section>
<div class="hero">
<div class="row mx-auto" style="max-width: 1220px;">
...

Answer 2

Try to add this style into .hero
display: flex;
justify-content: center;