A couple things wrong with the stylings here. This often happens when a bad choice is made in styling and it grows and grows by adding other styles to try and fix the underlying issue.
logo – This is what is causing the problem. It’s floated, but the height is ruining your layout and kicking around elements. Try this:
logo { position:absolute; top: 0; left:0; }
This will stop it from mucking around the rest of your design but still allow you to position it where you need. Adjust the top/left values as needed to position it.
content – Remove position relative and margin top. Don’t need them. This was to compensate for the #logo pushing everything down.
headernav – You have all kinds of stuff on this. Just switch it’s positiong with #top-nav. Why put it after if it’s supposed to go above. Remove the position: relative and the top/left values. Change float to right.
top-menu – You can float this right and position as needed with some margin. Reduce top padding.
From here you should be good to go.
Remember, if css gets too hard, then something is wrong and you should go back and try to find the heart of the issue. In this case it was the logo (which by the way, the id should be on the , not the ).
As another note, the #container has a width of 950px and the .single_container inside it has a width of 980px. Not sure if that’s intentional but it can cause problems later.