Justify-content: center not centering

CodePen

This is without justify-content: center;:

See that the right and left space is the same?

This is with:

They moved to the right. Why?

Try removing the default padding on the ul and use justify-content: center

1 Like

You are the best!

If I recall well, it is good practice to put in :root or html: padding: 0; margin: 0;.

Should I?

Using a reset like that is pretty common. Mostly it’s done at the top of the CSS using the universal selector.

* {
  margin: 0;
  padding: 0;
}

Just be aware that it does force you to create your own margins for all elements, as opposed to just starting with the default ones. They can be adjusted later either way.