When the navigation bar is absent, my image aligns perfectly centered on the page.
However, once I include the nav bar (created with an unordered horizontal list), the image shifts more towards the left of the page.
This layout is very basic in nature.
<div>
<img ...>
<ul>....</ul>
</div>
To view the complete code (which cannot be fully displayed here), please visit: https://jsfiddle.net/ps84wbx0/
I am unable to provide the image, but this issue likely affects any image placement.
The following is the design I am attempting to achieve:
https://i.sstatic.net/m5SLR.jpg
Snippet below:
/* Styling for Logo */
div.homepage {
position: fixed;
left: 50%;
}
img.homepage {
position: relative;
left: -50%;
}
/*Styling for Nav Bar*/
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"><a href="index.html" data-text="Home">Home</a></li>
<li class="button"><a href="about.html" data-text="About">About</a></li>
<li class="button"><a href="services.html" data-text="Services">Services</a></li>
<li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
</ul>
</div>