Horizontally center text after floating image CSS HTML - html

Question

I am having trouble centring text relative to the width of my webpage, next to an image which is set to float to the left of the page.
Here is the HTML code:
<div class="header_img">
<img border="0" src="images/logo.png" alt="Home" width="200" height="35">
</div>
<div class="header">
HOMECONTACT
</div>
And here is the CSS code:
.header {
background:#000000;
font-size: 150%;
color: #666666;
font-family: ProximaNovaLight, Proxima Nova Light;
clear: both;
text-align: center;
display:inline;
}
.header_img {
float: left;
}
I am currently seeing the image floating to the left as I wanted, but the text (within the "header" class) is also floating to the left, next to the image.
Any help would be much appreciated!

Answer 1

Add this to your CSS:
.header { width: 40%; margin: 0 auto; }
and remove:
clear:both
display:inline
will give you:
.header_img {
float: left;
}
.header {
background:#000000;
font-size: 150%;
color: #666666;
font-family: ProximaNovaLight, Proxima Nova Light;
text-align: center;
margin: 0 auto;
width: 40%;
}
<div class="header_img">
<a href="index.php" class="head">
<img border="0" src="images/logo.png" alt="Home" width="200" height="35"/>
</a>
</div>
<div class="header">
HOMECONTACT
</div>
jsFiddle

Answer 2

Here is a way to do it without fixing the width of the .header. It is not clear where the background color (black) should be painted.
.header {
background:#000000;
font-size: 150%;
color: #666666;
font-family: ProximaNovaLight, Proxima Nova Light;
text-align: center;
display:block;
width: auto;
height: 35px; /* match image ? */
}
.header_img {
float: left;
}
<div class="header_img">
<img border="0" src="http://placehold.it/200x35" alt="Home" width="200" height="35">
</div>
<div class="header">
HOMECONTACT
</div>