How to expand the list of cards inside of the grid from the center?

Question

i created a list of cards with css grid.

as you see, my card section start expanding from left side.
i want to make it expand from center of screen not left side.

this is my code for this section :

section#our-team {
    grid-column: 1 / -1;
    display:  grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    grid-gap: 30px;
}
.card {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 30px;
}
.card > .card-body {
    margin: 0 auto;
    text-align: center;
}
.card > .card-body > p {
    margin-top: 2px;
    color: #8C8C8C;
    font-size: 12px;
    transition: 0.1s ease-in-out;
}
.card > .card-body > h4 {
    margin-top: 25px;
}
.card > .card-header {
    width: 100%;
    border: 5px solid #414141;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.1s ease;
}

<section id="our-team">
  <div class="card">
    <div class="card-header">
       <img src="images/mahdi fakhr.svg" alt="mahdi                         fakhr" title="mahdi fakhr" />
    </div>
    <div class="card-body">
      <h4 class="mr-0">Mahdi fakhr</h4>
      <p class="mr-0">Product designer</p>
    </div>
  </div>    
</section>