Why won't my nav bar center?

So I've got my navbar set up pretty close to the way I'd like it to look, but for some reason it won't go to the center of my page. I've tried putting text-align: center; on most of the different elements that make up my nav bar, but it won't go no matter what I do. What am I doing wrong?

.navbar {
  margin: 0;
  padding: 0;
  text-align: center;
  border-bottom: solid #000;
  border-width: 1.5px 0;
  list-style: none;
  height: 25px;
  width: 1000px;
}
.navbar a {
  text-decoration: none;
  padding: 0;
  margin: 10px;
  border-bottom: 10px;
  color: #000;
  text-align: center;
}
li {
  display: inline-block;
  font-family: 'Muli', sans-serif;
  font-size: 19px;
  margin: 0;
  padding: 0;
  text-align: center;
}

<div class="banner">
  <h1>Brian Funderburke Photography &amp; Design</h1>
  <div class="nav">
    <ul class="navbar">
      <li><a href="home.html">Home</a>
      </li>
      <li><a href="photo.html">Photography</a>
      </li>
      <li><a href="design.html">Design</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
      <li><a href="contact.html">Contact</a>
      </li>
    </ul>
  </div>

Solution

Set the .banner width to 100% and then set .nav to center:

.banner{width: 100%;}
.nav{text-align: center;}

See fiddle: https://jsfiddle.net/c51kr3jo/