Can I remove bullets instead of just hiding them?

March 25, 2022

When I use the code list-style: none; to remove the bullets, it appears it’s just hiding them, because the alignment is off center as if the bullets are just invisible but still there. How can I make the alignment centered for my lists?

This image shows the bullets unhidden.

In this image, when I hide the bullets, the list is off center, as if the bullet is invisible but still affecting the alignment.

>Solution :

All you should have to do is remove the padding-left on the list.

#list-2 {
  list-style: none;
}
#list-3 {
  list-style: none;
  padding-left: 0;
}

<ul id="list-1"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>
<ul id="list-2"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>
<ul id="list-3"> 
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ul>