Can you guys help me? Why did the bootstrap card stick left in mobile view

I did anything but it still won't work. Maybe you guys can help me? Here are some photos.

BEFORE

AFTER

I want the card to stay in the middle when I view it in mobile size. maybe there are some codes that I miss? I would like to thank you so much if someone solved it for me. I'm still new using bootstrap and not really pro at HTML and CSS. here are the codes.

<!-- Members Card -->
<div class="container my-5">

  <h1 class="text-center mb-3"><b>MEMBERS</b></h1>

  <div class="d-flex justify-content-around">

    <div class="row">
      <!-- Jennie -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Jisoo -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Lisa -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

      <!-- Rose -->
      <div class="col-md col-sm">
        <div class="card" style="width: 15rem;">
          <img src="{image}" class="card-img-top" alt="...">
          <div class="card-body text-center">
            <h5 class="card-title"><b>{Name}</b></h5>
            <p class="card-text">{desc}</p>
            <a href="#" class="btn btn-dark btn-outline-secondary text-white">show more</a>
          </div>
        </div>
      </div>

    </div> <!--close tag for row-->

  </div> <!--close tag for d-flex -->
</div> <!--close tag for container-->
<!-- End Members Card -->