Center a container row on bootstrap - html

Question

I read online that you can use the below code to center a row in a container using bootstrap, but I haven't been able to get it to work and I think it might have something to do with the css.
<div class="row justify-content-center">
Below is the current code. There was no .portfolio in the template and it won't let me add it.
.portfolio #portfolio-flters {
padding: 0;
width: 50%;
margin: auto;
list-style: center;
text-align: center;
border-radius: 50px;
}
.portfolio #portfolio-flters li {
cursor: pointer;
display: inline-block;
padding: 10px 15px;
font-size: 15px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
color: #444444;
width: 50%;
margin: auto;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
font-family: "Poppins", sans-serif;
}
.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
color: #593d4a;
}
.portfolio #portfolio-flters li:last-child {
margin-right: 0;
}
.portfolio .portfolio-item {
margin-bottom: 30px;
}
.portfolio .portfolio-item .portfolio-info {
opacity: 0;
position: absolute;
left: 30px;
right: 30px;
margin: auto;
width: 20%;
text-align: center;
bottom: 0;
z-index: 3;
transition: all ease-in-out 0.3s;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
font-size: 12px;
color: #fff;
font-weight: 600;
color: #191919;
}
.portfolio .portfolio-item .portfolio-info p {
color: #4c4c4c;
font-size: 14px;
margin-bottom: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 40px;
font-size: 24px;
top: calc(50% - 18px);
color: #333333;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
color: #593d4a;
}
.portfolio .portfolio-item .portfolio-info .details-link {
right: 10px;
}
.portfolio .portfolio-item .portfolio-links {
opacity: 0;
left: 0;
right: 0;
text-align: center;
z-index: 3;
position: absolute;
transition: all ease-in-out 0.3s;
}
.portfolio .portfolio-item .portfolio-links a {
color: #fff;
margin: 0 2px;
font-size: 28px;
display: inline-block;
transition: 0.3s;
}
.portfolio .portfolio-item .portfolio-links a:hover {
color: #593d4a;
}
.portfolio .portfolio-item:hover .portfolio-info {
opacity: 1;
bottom: 20px;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css">
<section id="dataviz/wordclouds" class="portfolio">
<p></p>
<div class="container">
<h3>Word Clouds</h3>
<div class="portfolio-container" data-aos="fade-up" data-aos-delay="150">
<div class="row justify-content-center">
<div class="col-lg-4 portfolio-item filter-wc">
<img src="https://via.placeholder.com/300x100" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>20 Nov</h4>
</div>
</div>
<div class="col-lg-4 portfolio-item filter-wc">
<img src="https://via.placeholder.com/300x100" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>21 Nov</h4>
</div>
</div>
<div class="col-lg-4 portfolio-item" filter-wc>
<img src="https://via.placeholder.com/300x100" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>22 Nov</h4>
</div>
</div>
<div class="col-lg-4 portfolio-item filter-wc">
<img src="https://via.placeholder.com/300x100" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>23 Nov</h4>
</div>
</div>
<div class="col-lg-4 portfolio-item filter-wc">
<img src="https://via.placeholder.com/300x100" class="img-fluid" alt="">
<div class="portfolio-info">
<h4>24 Nov</h4>
</div>
</div>
</div>
</div>
</section>
And this is an image of the problem, the last row isn't centered:
Thank you so much in advance for the help!