Trouble centering fixed navigation bar - html

Question

Basically I'm looking to have a fixed navbar on my site, which moves with you when you scroll down. So far everything is good, but I'm really having trouble centering the bar.
HTML
<header id="header">
<nav id="nav">
<ul>
<li>Front</li>
<li>Mastering</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</nav>
</header>
CSS
#header {
z-index: 1;
width: 100%;
height: 80px;
position: fixed;
background-color:rgba(0,0,0,0.8);
display: block;
}
#nav {
z-index: 1;
width:100%;
margin-top: 20px;
display: block;
position: fixed;
text-align:center;
}
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 50%;
/* To help to identify the location */
height:50px;
background-color:green;
}
#nav li{
margin-top: 9px;
float: left;
padding-left: 21px;
display:block;
}
JSFiddle
https://jsfiddle.net/kjr1591d/1/
Would love to have some help. Thank you in advance :)

Answer 1

I think you looking for something like this-
#header {
z-index: 1;
width: 100%;
height: 80px;
position: fixed;
background-color:rgba(0,0,0,0.8);
display: block;
}
#nav {
z-index: 1;
width:100%;
margin: 15px 0;
display: block;
position: fixed;
text-align:center;
}
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 50%;
/* To help to identify the location */
height:50px;
background-color:green;
text-align:center;
padding:0
}
#nav li{
margin:15px 0 0;
/*float: left;*/
padding:0 10px;
display:inline-block;
}
<header id="header">
<nav id="nav">
<ul>
<li>Front</li>
<li>Mastering</li>
<li>Samples</li>
<li>Contact</li>
</ul>
</nav>
</header>

Answer 2

jiddle
#nav ul{
list-style: none;
display: block;
margin: 0 auto;
width: 80%;
/* To help to identify the location */
height:50px;
background-color:green;
}

Answer 3

Change the ul and li's to display as inline-block and assign the li's a left and right margin of equal sizing.