Bootstrap justify-content-around last item misplaced - html

Question

Currently my prototype Website looks like this, with justify-content-around:
What I would like is, that when there is an uneven amount of cards, that the last card is in line with the others. Is there a way to do it? I know, that it works with justify-space-between, but what about around?
Here's my source code:
<div class="container-fluid">
<div class="container-fluid row justify-content-around cards ml-0">
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
<div class="card col-12 col-md-5 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
what I added in an extra css file is the following:
.cards::after{
content: '';
flex: auto;
}
So that at least the last item is on the left side and not in the middle!
Thanks in advance!

Answer 1

Change your col-md-5 to col-md-4 . Below I've done for one of your small snippet
<div class="card col-12 col-md-4 col-lg-4 col-xl-3 mb-4 mx-1">
<img src="../images/lit.svg" class="card-img-top" alt="alternative">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>