expanding flex to full width with cards BootStrap4 - html

Question

I am using flex to contain cards using bootstrap but the cards are not shown to the full width of the screen. They are stacked up on the left half of the screen.
The HTML file is this:
<section class="projects" id="projects">
<div class="services-cards">
<div class="card" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_develop_app_re_bi4i.svg" alt="Card image cap">
<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" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_for_review_eqxk.svg" alt="Card image cap">
<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" style="width: 14rem;">
<img class="card-img-top" src="images/undraw_Success_factors_re_ce93.svg" alt="Card image cap">
<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>
</section>
And the css is as
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
padding:10px;
}
.services-cards{
display: flex;
flex-direction: row;
margin-top: 20px;
margin-left:30px;
margin-bottom: 90px;
justify-items:auto;
}
What am I doing wrong? I'm expecting that the content of the flexed (cards in this case) will be full width of the screen.
Right now it looks like this
enter image description here

Answer 1

Just use .justify-content-between or .justify-content-around on .service-cards. Between will put the first and last at the far edges and evenly distribute the items between them, while around will make all the spaces on outsides and between equal.
<section class="projects" id="projects">
<div class="services-cards justify-content-between">
{card} {equal-space} {card} {equal-space} {card}
</div>
</section>
Or
<section class="projects" id="projects">
<div class="services-cards justify-content-around">
{equal-space} {card} {equal-space} {card} {equal-space} {card} {equal-space}
</div>
</section>