Bootstrap div ortalama

Bu divleri ekranın ortasına nasıl alabilirim sağ tarafta daha fazla boşluk var ama ben eşit olmasını istiyorum
Bu divlerin kodları aşağıda

  <div class='card' style='width: 18rem; margin:3%;  float:left;' id='$id'>
  <img class='card-img-top' src='/kaynak/img/X.png' alt='Card image cap'>
  <div class='card-body rounded'>
    <h5 class='card-title'><stonrg>BASLİK: </strong><strong><font color=green>$XCV</font></strong></h5>
  </div>
  <ul class='list-group list-group-flush'>
    <li class='list-group-item'><strong>BASLİK X:</strong> <strong><font color=red>$saat</font></strong></li>
  </ul><a href='X-iptal.php?id=$id' class='btn btn-danger mt-2' style='border: none;'><font color=white>İşlemi tamamla</font></a>


</div>

Cardları tümüyle div içine al classa bunu yaz
Display: flex;
Align-items: center;
Justify-content: center;

<div class='Display: flex; Align-items: center; Justify-content: center;'>
  <div class='card' style='width: 18rem; margin:3%;  float:left;' id='$id'>
  <img class='card-img-top' src='/kaynak/img/masa.png' alt='Card image cap'>
  <div class='card-body rounded'>
    <h5 class='card-title'><stonrg>MASA NO : </strong><strong><font color=green>$masano</font></strong></h5>
  </div>
  <ul class='list-group list-group-flush'>
    <li class='list-group-item'><strong>İSTENME SAATİ :</strong> <strong><font color=red>$saat</font></strong></li>
  </ul><a href='siparis-iptal.php?id=$id' class='btn btn-danger mt-2' style='border: none;'><font color=white>İşlemi tamamla</font></a>


</div>
</div>

Yine aynı hocam

Rov olması lazım sanırım yanlıs hatırlamıyorsam. En baş ve en sona rov class eklenmesi gerekiyordu herhalde

<div class='Display: flex; Align-items: center; Justify-content: center;'>
<div class='row'>
  <div class='card' style='width: 18rem; margin:3%;  float:left;' id='$id'>
  <img class='card-img-top' src='/kaynak/img/masa.png' alt='Card image cap'>
  <div class='card-body rounded'>
    <h5 class='card-title'><stonrg>MASA NO : </strong><strong><font color=green>$masano</font></strong></h5>
  </div>
  <ul class='list-group list-group-flush'>
    <li class='list-group-item'><strong>İSTENME SAATİ :</strong> <strong><font color=red>$saat</font></strong></li>
  </ul><a href='siparis-iptal.php?id=$id' class='btn btn-danger mt-2' style='border: none;'><font color=white>İşlemi tamamla</font></a>


</div>
</div>
</div>

Olmadı hocam yukardan aşağı oldu hepsi

Hocam ben bootstrapsız söylemiştim css class etiketine yaz.

aboow hocam html css e resmen hakaret etmişsiniz

<div class="d-flex justify-content-center align-items-center" >
 <div class='card' style='width: 18rem; margin:3%;  float:left;' id='$id'>
<img class='card-img-top' src='/kaynak/img/masa.png' alt='Card image cap'>
 <div class='card-body rounded'>
  <h5 class='card-title'><stonrg>MASA NO : </strong><strong><font color=green>$masano</font></strong></h5>
</div>
<ul class='list-group list-group-flush'>
<li class='list-group-item'><strong>İSTENME SAATİ :</strong> <strong><font color=red>$saat</font></strong></li>
</ul><a href='siparis-iptal.php?id=$id' class='btn btn-danger mt-2' style='border: none;'><font color=white>İşlemi tamamla</font></a>
</div>
</div>

Doğrusu bu olması gerekiyor hocam

Çözemezseniz bana yazın bilgisayara geçtiğimde hallederim