Q:

CSS: li wont center inside a ul

I'm trying to center a list inside a ul but it won't work.  What's wrong?  I used used text center but it still won't work.  

.mainNav {
  background-color: #B00002;
  margin-right: auto;
  margin-left: auto;
  list-style-type: none;
  width: 204px;
  margin-top: auto;
  text-align: center;
}

li {
  text-align: center;
}

a {
  color: #FFFFFF;
  font-size: 33px;
  padding-right: 37px;
  padding-left: 37px;
  text-decoration: none;
}
<body>
  <ul class="mainNav">
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Other</a></li>
  </ul>
</body>

A:

Just remove padding from ul. 

.mainNav {
  background-color: #B00002;
  margin-right: auto;
  margin-left: auto;
  list-style-type: none;
  width: 204px;
  margin-top: auto;
  text-align: center;
  padding: 0; /* HERE */
}

li {
  text-align: center;
}

a {
  color: #FFFFFF;
  font-size: 33px;
  padding-right: 37px;
  padding-left: 37px;
  text-decoration: none;
}
<body>
  <ul class="mainNav">
    <li><a href="index.html">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Other</a></li>
  </ul>
</body>

