I have some card with bootstrap and I would like to have left margin…I would like the cards to be evenly distributed across the width.

Basically, you can see that there is red on the right, and I wish there wasn’t…

Thanks for help

.azer {
  background: red;
}

.card-annuaire {
  background: green;
  border: 0;
  border-radius: 0;
  margin-right: 1rem;
}

.card-annuaire .card-body {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf" >
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

You can see here: https://codepen.io/zazzou/pen/abYdZQL

You need to remove margin right from .card-annuaire Like this:

.card-annuaire {
      background:green;
            border:0;
            border-radius: 0;
            .card-body {
                text-align: center;
            }
.azer {
  background: red;
}

.card-annuaire {
  background:green;
        border:0;
        border-radius: 0;
        .card-body {
            text-align: center;
        }
    }
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row justify-content-center my-5">
    <div class="col-12">
      <div class="qsdf" >
        <div class="azer">
          <div class="col-md-12">
            <div class="row g-0">
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" alt="pic" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
              <div class="col-md-3 grid-item-annuaire letter-<?= $first_letter; ?>">
                <div class="card card-annuaire mb-4">
                  <div class="card-body">
                    <div class="card-text entry-content"><img src="https://picsum.photos/100" />
                    </div><!-- /.card-text -->
                  </div><!-- /.card-body -->
                </div><!-- /.card  -->
              </div><!-- /.col  -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>