The issue is with the <img />
element you have in the header. When you hide it you can see that it no longer interferes with your layout.
The problem is because the <img />
element will expand to the maximum size of the container, which is 100%. That 100% does not include the 30px you have reserved for each side, as floated elements are taken out of the document flow. Declaring 100% of a child element means it will expand to the width of its parent elements, without taking into account the extra space taken up by floated siblings. Therefore, a solution would be using CSS calc
to constrain the width of .center
, and float it to the left, too:
.center {
width: calc(100% - 60px);
}
Alternatively, you can give .center
a margin of 30px on the left and on the right. The floated divs will ignore margins because they are taken out of the document flow, and will fit perfectly within that 30px corridor you have created for them.
.center {
margin: 0 30px;
}
Both methods I have tested and verified by playing with the Inspector on the link you have provided. The calc()
method might suffer from lack of support in older browsers, while the margin method will work for most browsers that are in use today :) pick any one.