Center list items in container

Hi. I’m trying to center list items inside a nav bar with no luck.

I’ve tried the solution here:

which is to create a parent and do something similar to the following:

div.parent {
	text-align: center;
	}
ul { 
	display: inline-block; 
	text-align: left; 
	}

I created a parent div just to try this method but it doesn’t seem to work.

Here’s the pen

https://codepen.io/RutherfordTheBrave/pen/wvzBNBj

hey @Rutherford
I studied your codepen here is what I did and it worked

#navbar ul
{
      text-align : center;
}

have a good day

1 Like

I forgot to say I want to center the elements but make the text left justified.

You can use the following for the #list-container selector:

#list-container {
  background-color: white;
  display: flex;
  justify-content: center;
}

and simplify the #navbar ul selector to be:

#navbar ul {
  list-style-position: outside;
  list-style-type: none;
  padding: 1px;
  text-align: left;
}
1 Like

Thank you!!!