why is my nav not centred like everything else - html

Question

just trying to make everything centred and clean. Everything seems to be, apart from my nav bar at the top which seems to stick to the right ?
I can't figure out why?
Thank you
html
..............
<div id="nav">
<ul>
<li>Home</li>
<li>Music</li>
<li>About</li>
<li>Musician</li>
<li>Instagram</li>
<li>Twitter</li>
<li>Contact</li>
</ul>
</div>
<!-- BELOW THE NAV -->
<div id="landing">
<br><br><br> <p>more content</p>
</div>
............
CSS
.............
body { font-family: 'Source Code Pro', monospace; color: white;
background-color: black;
margin: 0 auto;
max-width: 100%;
text-align: center;
}
div#container {
margin: 0 auto;
}
div#nav {
position: fixed;
vertical-align: top;
display: inline-block;
}
li {
display: inline;
}
div#landing {
background-image: url('rose1.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height: 100%;
margin: 0 auto;
}
not sure why the nav is floating to the right ?

Answer 1

Try this:
div#nav {
position: fixed;
vertical-align: top;
display: block;
margin: 0 auto;
top: 0;
left: 0;
right: 0;
}

Answer 2

I just update your code with few CSS changes. I hope it'll help you out. Thanks
Remove display: inline-block; and add width: 100%; in div#nav.
div#nav {
position: fixed;
vertical-align: top;
width: 100%;
}
Also remove default padding-left from ul.
ul {
padding-left: 0;
}
body {
font-family: 'Source Code Pro', monospace; color: white;
background-color: black;
margin: 0 auto;
max-width: 100%;
text-align: center;
}
div#container {
margin: 0 auto;
}
div#nav {
position: fixed;
vertical-align: top;
width: 100%;
}
ul {
padding-left: 0;
}
li {
display: inline;
}
div#landing {
background-image: url('rose1.png');
background-size:cover;
background-position:center;
background-repeat:no-repeat;
height: 100%;
margin: 0 auto;
}
<div id="nav">
<ul>
<li>Home</li>
<li>Music</li>
<li>About</li>
<li>Musician</li>
<li>Instagram</li>
<li>Twitter</li>
<li>Contact</li>
</ul>
</div>
<!-- BELOW THE NAV -->
<div id="landing">
<br><br><br> <p>more content</p>
</div>

Answer 3

From the div#nav CSS block just remove the position property:
div#nav {
vertical-align: top;
display: inline-block;
}