Just trying to make everything centered 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><a href="#landing">Home</a></li>
<li><a href="#music">Music</a></li>
<li><a href="#about">About</a></li>
<li>Musician</li>
<li><a href="#instagram">Instagram</a></li>
<li><a href="#twitter">Twitter</a></li>
<li><a href="#contact">Contact</a></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?