Why won't my nav bar center? - html

Question

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 & Design</h1>
<div class="nav">
<ul class="navbar">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>

Answer 1

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/

Answer 2

How I fix this problem usually is by following 3 steps:
Adding a full-width or a big width to the navbar container (.nav div in your case)
Adding a width to the navbar (usually try to find a width that will fit the most elements)
Adding margin: 0 auto to the navbar (this will center align the .navbar div)
Here is a jsfiddle I've created. Hope it helps.

Answer 3

I added
.nav {
display: flex;
justify-content: center;
}
Which I got from this AMAZING article.
http://jsfiddle.net/abalter/44w7b73f/

Answer 4

navbar center
.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;
}
/* center */
.nav1 {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
text-align: center;
}
.navbar1 {
-webkit-align-self: center;
align-self: center;
}
li a:hover {
color: red;
cursor: pointer;
}
/* || center */
<div class="nav1">
<h1>Brian Funderburke Photography & Design</h1>
</div>
<div class="nav nav1">
<ul class="navbar navbar1">
<li>Home
</li>
<li>Photography
</li>
<li>Design
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>

Answer 5

Your code appears to already be working from what I can tell (though you were missing a closing </div> in your example). Make sure your CSS is being properly imported and applied.
Here is a working example to prove it is looking okay: http://jsfiddle.net/611mbvtu/