I'm struggling to center align 3 divs on the page. While I've managed to align them horizontally, I can't seem to get them centered. Whenever I try, the middle one ends up getting pushed into the third div. Here's an example image of what I mean: https://i.sstatic.net/cFfUw.jpg
Below is the HTML code I'm using with Bootstrap:
<div class="container">
<div class="row">
<div class="col">
<div class="card" style="width: 18rem;">
<img src="/pfp.jpg" class="card-img-top" alt="...">
<ul class="list-group list-group-flush">
<li class="list-group-item">Name: </li>
<li class="list-group-item">Age: </li>
</ul>
<div id="desc" class="card-body">
<h5 class="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>
</div>
</div>
</div>
<div id="middle" class="col">
Colegiul National "Nicolae Titulescu"
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/cnntcarousel1.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/cnntcarousel2.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="/cnntcarousel3.png" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col">
<div class="card" style="width: 18rem;">
<img src="/pfp.jpg" class="card-img-top" alt="...">
<ul class="list-group list-group-flush">
<li class="list-group-item">Name: </li>
<li class="list-group-item">Age: </li>
</ul>
<div id="desc" class="card-body">
<h5 class="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>
</div>
</div>
</div>
</div>
</div>
And here is the CSS code I'm using:
.container {
position: absolute;
top: 40%;
left: auto;
font-family: Lemon Milk;
/*background-color: rgba(255, 255, 255, .4)*/}
#middle {
text-align: center;
color: white;}
I have a background image on the page body, which is why I'm utilizing position: absolute;.