How to align list items

Question

I am giving a trial on how to style lists and using child selectors. Currently I managed to style an unordered list as my jsfiddle displays:https://jsfiddle.net/Wosley_Alarico/mc5w2wqL/1/.

Html:

<ul>
  <li>List item 1</li>
  <li>List item 1</li>
  <li>List item 1</li>
  <li>List item 1</li>
</ul>

Css:

ul li:not(:first-child){
  color: red;
}
ul li:first-child{
  line-height: 50px;
  list-style: none;
}

At the moment the bullet disappeared, but the list did not move to the far left replacing the position of the bullet. How can I align the first list item to the bullets of the other list items?

Answer 1

That's because your ul-items has an padding-left: 40px; If you set this to 0, all items will go to left. If you want to change then the left-alignment of the li-items, you could use margin-left on them.

Just try and add this to your fiddle, and you will see that the first items move 20px to right, while all other items on the left.

ul {
  padding-left: 0;
}

ul li:first-child {
  list-style: none;
  margin-left: 20px;
}

If you want to prevent the padding which accours then, just add line-height: 100%; to ul li:first-child like:

ul li:first-child {
  line-height: 100%;
  list-style: none;
  margin-left: 20px;
}

Answer 2

Its because the <ul> has padding and margin-before.

Add margin-left:-1em to align with bullets or margin-left:-40px to align with edge of page.

https://jsfiddle.net/mc5w2wqL/3/