Using Bootstrap 5, I've successfully created a layout with aligned rows of buttons at 1200px and above. However, an issue arises at the XL breakpoint (1199px) where the buttons align to the left of the container instead of being centered.
You can view the fiddle here: https://jsfiddle.net/mfen723/xrdcq9g6/11/
Despite using flexbox to center the content of each row, like so:
<div class="row pb-4 d-flex justify-content-center">
<div class="col-xl-4">
<p class="btn btn-warning btn-lg"><a href="resources-art-therapy-clinic.html" class="lit-link">Art Therapy<br>Clinical Literature<br>Source Material</a></p>
</div>
<div class="col-xl-4">
<p class="btn btn-warning btn-lg "><a href="#" class="lit-link">Resilience<br>Spiritual Development</a></p>
</div>
<div class="col-xl-4">
<p class="btn btn-warning btn-lg"><a href="resources-literature-integrative-medicine.html" class="lit-link">Integrative Medicine</a></p>
</div>
</div>I'm struggling to understand why the buttons are aligning to the left. Any help would be greatly appreciated. The layout is set against a parallax background, which may be affecting the alignment of the row's content.