Home > OS >  Margin does not workk
Margin does not workk

Time:09-09

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >

  <div >
    <a href="/AnonymousCode/anonymouscode.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/AC_324x400-1.jpg"></a>
    <div >
      <h4 >ANONYMOUS; CODE</h4>
      <p > </p>
    </div>
  </div>

  <div >
    <a href="/CHAOS;HEAD NOAH/CHAOS;HEAD NOAH.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/CHN_324x400.png"></a>
    <div >
      <h4 >CHAOS;HEAD NOAH</h4>
      <p > </p>
    </div>
  </div>

  <div >
    <a href="/CHAOS DOUBLE PACK/CHAOSDOUBLEPACK.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/CHC_324x400.jpg"></a>
    <div >
      <h4 >CHAOS;HEAD NOAH / DOUBLE PACK</h4>
      <p > </p>
    </div>
  </div>

  <div >
    <a href="/AI-nirvana/ai_nirvana.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/AI2_324x400_r2.jpg"></a>
    <div >
      <h4 >AI: THE SOMNIUM FILES</h4>
      <p > </p>
    </div>
  </div>

</div>

CodePudding user response:

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div >

  <div >
    <a href="/AnonymousCode/anonymouscode.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/AC_324x400-1.jpg"></a>
    <div >
      <h4 >ANONYMOUS; CODE</h4>
      <p > </p>
    </div>
  </div>

  <div >
    <a href="/CHAOS;HEAD NOAH/CHAOS;HEAD NOAH.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/CHN_324x400.png"></a>
    <div >
      <h4 >CHAOS;HEAD NOAH</h4>
      <p > </p>
    </div>
  </div>

  <div >
    <a href="/CHAOS DOUBLE PACK/CHAOSDOUBLEPACK.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/CHC_324x400.jpg"></a>
    <div >
      <h4 >CHAOS;HEAD NOAH / DOUBLE PACK</h4>
      <p > </p>
    </div>
  </div>

  <div >
    <a href="/AI-nirvana/ai_nirvana.html"><img  src="https://www.spike-chunsoft.com/wp-content/uploads/AI2_324x400_r2.jpg"></a>
    <div >
      <h4 >AI: THE SOMNIUM FILES</h4>
      <p > </p>
    </div>
  </div>

</div>

  • Related