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>

Try this code with your list item class it might work and will aline to center

display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
list-style: none;

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.