Estoy trabajando en un proyecto básico de barra de navegación, y estoy tratando de hacer que esta lista se alinee al centro. He intentado usaralign-content ytext-align, pero mi barra todavía está posicionada hacia la izquierda.

¿Me puede mostrar cómo centrar esta lista horizontalmente?

                  li1    li2      li3

(debe estar centrado por CSS no espacios, por supuesto)

Aquí hay unManifestación

@import url(http://fonts.googleapis.com/css?family=Quicksand:300);
#bannercontent {
  font-family: 'Quicksand:300';
  align-items: center;
  text-align: center;
  align-content: center;
  font-size: 25px;
}
.banner {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: grey;
  width: 560px;
  height: 40px;
  vertical-align: middle;
}
.links {
  text-decoration: none;
}
.links:hover {
  color: white;
}
.bannerlinks {
  display: inline;
  margin-right: 20px;
  border: 12px;
  border-color: black;
  background-position: 50% 50%;
}

<div id="bannercontent">
  <ul class="banner">
    <li class="bannerlinks"><a class="links" href="#">What We Do</a></li>
    <li class="bannerlinks"><a class="links" href="#">Pricing</a></li>
    <li class="bannerlinks"><a class="links" href="#">Contact Us</a></li>
    <li class="bannerlinks"><a class="links" href="#">Wholesale</a></li>
  </ul>
</div>