Floating image in header pushes headings away - html

Question

I've created a header with headings that would display in the center of the page.
However, I also want a logo to be in the left of the header.
The issue I find is that it pushes the headings to the right.
It makes sense that it does this, but I want the headings to stay in the center of the header, and not be pushed to the right by the image. How should I do this?
body {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
#header {
background-color: black;
width: 100%;
height: 100px;
}
.headerHeadings {
text-align: center;
}
a {
color: white;
display: inline-block;
font-size: 40px;
font-family: 'Franklin Gothic';
font: bold;
padding-left: 1%;
padding-right: 1%;
text-decoration: none;
text-transform: uppercase;
transition: height 1s linear;
-webkit-transition: height; /* For Safari */
clear: left;
}
a:hover, a:active {
background-color: black;
height: 90px;
}
#headerImage {
float: left;
}
<nav id="header">
<div id="headerImage">
<img src="http://placehold.it/200x100" alt="Logo" width="200" height="100" />
</div>
<br />
<div class="headerHeadings">
Page 1
Page 2
Page 3
Page 4
</div>
</nav>

Answer 1

You can use absolute position instead of float:
#header {
position:relative;
}
#headerImage {
position:absolute;
left:0;
top:0;
}
Check The Snippet Below
body {
margin: 0;
padding: 0;
}
html {
margin: 0;
padding: 0;
}
#header {
background-color: black;
width: 100%;
height: 100px;
position:relative;
}
.headerHeadings {
text-align: center;
}
a {
color: white;
display: inline-block;
font-size: 40px;
font-family: 'Franklin Gothic';
font: bold;
padding-left: 1%;
padding-right: 1%;
text-decoration: none;
text-transform: uppercase;
transition: height 1s linear;
-webkit-transition: height;
/* For Safari */
clear: left;
}
a:hover,
a:active {
background-color: black;
height: 90px;
}
#headerImage {
position:absolute;
left:0;
top:0;
}
<nav id="header">
<div id="headerImage">
<img src="logo.jpg" alt="Logo" width="200" height="100" />
</div>
<br />
<div class="headerHeadings">
Page 1
Page 2
Page 3
Page 4
</div>
</nav>
Note that the use of this can involve issues with the overlapping on small size of the screen, you can avoid that with media queries or if you don't need that responsive behavior use a fixed width on the header