Based on the description of what you're trying to do, your CSS is overly complicated. Something like this should work:
<header id="header" class="clearfix">
<img class="logo" src="images/logo.png">
<div class="links">
<a class="home" href="#">HOME</a>
<a class="product" href="#">PRODUCT</a>
</div>
</header>
.clearfix:before,
.clearfix:after
{
content: " ";
display: table;
}
.clearfix:after
{
clear: both;
}
.clearfix
{
*zoom: 1;
}
#header
{
background: #186467;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.logo
{
float: left;
}
.links
{
float: right;
}
The
.clearfix
CSS class is
the micro-clearfix[
^] to make sure that the floated content inside the header doesn't intrude onto the following elements.
Because you're using
position:fixed
for the header, it isn't part of the document flow. You'll need to make sure the rest of the content leaves enough room for the header using
margin-top
.
Demo:
https://jsfiddle.net/95vdjgc4/[
^]