Unordered List Won't Center Align

Question

h1 seems to have no trouble centering, however, the list (menu bar) will not align, it seems to be indented slightly. Please explain.

My HTML:

Answer 1

There's still default padding on the ul element. Change the CSS of your ul to this and it'll work:

ul{
  position:relative;
  display: inline-block;  
  list-style: none;
  width:100%;
  text-align: center;
  margin: auto;
  padding: 0;
}