Bootstrap 4 grid with cards: Centralize in x, flex behavior and alignment

Question

Im trying to build a card grid with a few behaviors:

1. Fixed width cards.
2. Cards needs to be centralized, for better space management.
3. Cards should be aligned vertically.

HTML and CSS, here:

body {background-color: lightblue;}

.card {
 box-shadow: 0 3px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25);
 transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-project {
 flex: 0 0 350px;
}

.card:hover {
 box-shadow: 0 30px 30px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

<div class="container-fluid mt-4 mb-2 bg">
 <div class="row justify-content-start">
   <div class="card card-project mx-auto mb-2">
   <div class="card-header">
    <h1>This is OK</h1>
   </div>
  </div>
  <div class="card card-project mx-auto mb-2">
   <div class="card-header">
    <h1>This is OK</h1>
   </div>
  </div>
  
  <div class="card card-project mx-auto mb-2">
   <div class="card-header">
    <h1>This is OK</h1>
   </div>
  </div>

  <div class="card card-project mx-auto mb-2">
   <div class="card-header">
    <h1>This should be on the right</h1>
   </div>
  </div>
  
    <div class="card card-project mx-auto mb-2">
   <div class="card-header">
    <h1>This should be on the right</h1>
   </div>
  </div>
  
 </div>
</div>
 

I've made a codepen HERE to illustrate my problem. Here is the image of it now, when the last two cards should be aligned with the rest of the cards:

Any help is greatly appreciated, thanks!