Margin does not workk

Question

I have this section that is not centered so I thought that I need margin-left but it doesn't work. Do you have any ideas how I can fix it?

This is how it looks.

This is the code:

.margins {
  margin-left: 100px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row margins">

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AnonymousCode/anonymouscode.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AC_324x400-1.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">ANONYMOUS; CODE</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS;HEAD NOAH/CHAOS;HEAD NOAH.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHN_324x400.png"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS DOUBLE PACK/CHAOSDOUBLEPACK.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHC_324x400.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH / DOUBLE PACK</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AI-nirvana/ai_nirvana.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AI2_324x400_r2.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">AI: THE SOMNIUM FILES</h4>
      <p class="card-text"> </p>
    </div>
  </div>

</div>

You can use `display: flex` and `align-items : center` for the margin div? can you elaborate more your problem? — debugger, Sep 08 '22 at 16:16

score 0 · Accepted Answer · answered Sep 08 '22 at 16:26

Here you go...

No need for margins, use Bootstrap's d-flex justify-content-center classes on the row.

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row margins d-flex justify-content-center">

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AnonymousCode/anonymouscode.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AC_324x400-1.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">ANONYMOUS; CODE</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS;HEAD NOAH/CHAOS;HEAD NOAH.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHN_324x400.png"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/CHAOS DOUBLE PACK/CHAOSDOUBLEPACK.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/CHC_324x400.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">CHAOS;HEAD NOAH / DOUBLE PACK</h4>
      <p class="card-text"> </p>
    </div>
  </div>

  <div class="col-6 col-md-4 col-lg-3 col-xl-2 my-3">
    <a href="/AI-nirvana/ai_nirvana.html"><img class="img-fluid" src="https://www.spike-chunsoft.com/wp-content/uploads/AI2_324x400_r2.jpg"></a>
    <div class="card-body">
      <h4 class="card-title text-center">AI: THE SOMNIUM FILES</h4>
      <p class="card-text"> </p>
    </div>
  </div>

</div>

Margin does not workk

1 Answers1