Why won't my list align horizontally center

Question

I'm working on a basic nav bar project, and I've trying to get this list to align center. I've tried using align-content and text-align, but my bar is still positioned towards to the left.

Can you please show me how to center this list horizontally?

                  li1    li2      li3

(should be centered by css not spaces, of course)

Here is a Demo

@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>

Answer 1

Its simply can done by balancing your margin .. as you given to right same do with giving left. here is the modified CSS

   @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;
    text-align:center;
}
.bannerlinks
{
    display: inline;
    margin-right: 20px;
    border: 12px;
    border-color: black;
    background-position: 50% 50%;
}

Answer 2

Looks like you just need margin: 0 auto; on the child element.

JSFiddle

#bannercontent {
    font-family:'Quicksand:300';
    text-align: center;
    font-size: 25px;
}
.banner {
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    background-color: grey;
    width: 560px;
    height: 40px;
    vertical-align: middle;
}

Answer 3

You can simply give the .banner element margin-left: auto; margin-right: auto;

.banner {
    margin-left: auto;
    margin-right: auto;
}

Answer 4

Add the /* the follwoing lines */ to .banner

margin-right:auto; margin-left:auto;

Check the answer below:

@import url(http://fonts.googleapis.com/css?family=Quicksand:300);

#bannercontent{


}



#bannercontent {
  font-family: 'Quicksand:300';
  font-size: 25px;
 
 
}
.banner {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: grey;
  width: 560px;
  height: 40px;
  vertical-align: middle;
  
   /* the follwoing lines */
    margin-right:auto;
  margin-left:auto;
}
.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>