Why does my nav bar affect the centering of my image? - html

Question

If I have no nav bar, then my image is centred fine.
If I then add my nav bar (using an unordered list horizontal list) then my image is aligned more to the left of the page.
It's just a basic layout
<div>
<img ...>
<ul>....</ul>
</div>
Here is the full code (it isn't much, but it's still too much to post on here)
https://jsfiddle.net/ps84wbx0/
Unfortunately I can't add the image but I'm sure the case is the same for any image.
This is the page I am trying to create
Here's a snippet:
/* Logo Styling */
div.homepage {
position: fixed;
left: 50%;
}
img.homepage {
position: relative;
left: -50%;
}
/*Nav Bar Styling*/
ul {
list-style-type: none;
margin-left: -50%;
}
li.button {
display: inline-block;
margin: 0 1em 1em 0;
padding: 0 4em;
font: 300 1.5em/3em 'Open Sans', sans-serif;
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border-radius: 2px;
}
li.button:hover{
background: #007DA7;
box-shadow: 0 0 3px rgba(black, .5) inset;
}
a:link, a:hover, a:active, a:visited {
text-decoration: none;
color: inherit;
}
<div class="homepage">
<img src="images/homepage.png" class="homepage">
<ul>
<li class="button">Home</li>
<li class="button">About</li>
<li class="button">Services</li>
<li class="button">Contact</li>
</ul>
</div>

Answer 1

There are multiple ways to solve this, but I think this one is one of the simplest. I've only changed the CSS of div.homepage, img.homepage and ul. Here's the code:
/* Logo Styling */
div.homepage {
position: fixed;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
img.homepage {
position: relative;
}
/*Nav Bar Styling*/
ul {
list-style-type: none;
}
li.button {
display: inline-block;
margin: 0 1em 1em 0;
padding: 0 4em;
font: 300 1.5em/3em 'Open Sans', sans-serif;
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border-radius: 2px;
}
li.button:hover{
background: #007DA7;
box-shadow: 0 0 3px rgba(black, .5) inset;
}
a:link, a:hover, a:active, a:visited {
text-decoration: none;
color: inherit;
}
<div class="homepage">
<img src="images/homepage.png" class="homepage">
<ul>
<li class="button">Home</li>
<li class="button">About</li>
<li class="button">Services</li>
<li class="button">Contact</li>
</ul>
</div>