Home>

I want to display 12 elements in 3 columns x 4 rows.
I want to put a margin on both sides of only the element that is in the center, and use the pseudo-class ": nth-child ()" to divide it into three equal parts, and to the left and right of the list (second, fifth, eighth ...) I set margin, but margin doesn't work.
Please let me know where to change or if there is a better way.
The current situation is as follows (the list is long, so it is omitted).
Thank you.

<div>
<ul>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
・
・
(Omitted)
・
・
<li>
<p>text</p>
</li>
<li>
<p>text</p>
</li>
</ul>
</div>
. list ul: after {
  content: "";
  display: block;
}
.list ul li {
  display: block;
  float: left;
  width: 32%;
  height: 430px;
}
.ul li: nth-child (3n-1) {
  margin: 0 2%;
}
  • Answer # 1

    Look for mistakes.

    . ul li: nth-child (3n-1) {
      margin: 0 2%;
    }


    Where is the ul class?

    The first rule of debugging is to doubt your code.
    If you specify the selector correctly, margin will be fine.