CSS margin:0 auto not working on li>a

I want a navigation bar with its elements (li>a) to be in the middle. I achieved only the float left style.

#wrapper {
  width: 900px;
  margin: 0 auto;
}
li {
  float: left;
}
ul>li>a {
  display: block;
  padding: 14px 16px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  margin: 0 auto;
  font: 18px Inconsolata;
}
/* fdfdf */

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  border-radius: 20px;
}
ul>li:hover {
  background: #111;
}
li>a.active {
  background-color: #4CAF50;
  color: #fff;
}

<div id='wrapper'>
  <ul>
    <li><a class='active' href="#">Home</a>
    </li>
    <li><a href="#">Blog</a>
    </li>
  </ul>
</div>

As you see I put in ul>li>a {margin:0 auto;}

Why doesn't it work?

Nav bar: