Alignement 4 colonnes

Bonjour,

Je n'arrive pas à aligner mes 4 colonnes, seulement 3 se trouvent sur la même ligne et la dernière apparaît en dessus.

<section id="why-us" class="why-us">

<div class="container">
<!-- Grid Row -->
<div class="row">

<!-- Grid Col -->

<div class="col-xl-8 col-lg-7 d-flex">
<div class="icon-boxes d-flex flex-column justify-content-between">
<div class="row">
<div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
<div class="icon-box mt-4 mt-xl-0">
<i class="bi bi-star"></i>
<h4>Service de qualité</h4>
<p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
<div class="icon-box mt-4 mt-xl-0">
<i class="bi bi-rulers"></i>
<h4>Accompagnement personnalisé</h4>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="300">
<div class="icon-box mt-4 mt-xl-0">
<i class="bi bi-calendar-check"></i>
<h4>Respect des délais</h4>
<p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="400">
<div class="icon-box mt-4 mt-xl-0">
<i class="bi bi-geo-alt"></i>
<h4>Large zone d'intervention</h4>
<p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</section><

Merci d'avance pour votre aide.