Aligning list items with title

Issue

I’m trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.

The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.

Here is my code:

.title{
  text-align: center;

}

nav{
  display: block;
  margin-left: auto;
  margin-right: auto; 
  width: 50%;
  background: blue;
}

li {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: red;
}

Solution

ul {
    padding: 0;
}

The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.

Answered By – austin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0