Hello Sitepoint!

I made this site about a year ago with some help from the Sitepoint users (ip Stomme Poes). The site looks great, allthough there were some issues getting it good crossbrowser. I'm working on a laptop 15" with screen res 1600x900, the site looks absolutely fine on ie, safari, chrome and firefox. I get however remarks from other people saying the header isn't ideal and gives a big whitespace between logo and horizontal menu. I tested it with browsershots, and indeed on other resolutions there seems to be a header issue. When the site is windowed, I'm having the same issue.

Can you guys help me out how to fix this, so the entire header doesn't confuse my site? The problem is not crossbrowser, because every browser displays the same, it's more a resolution and screensize problem.
In attachment is how it should be like on my laptop: header issue.png

This is how other screen resolutions see it: Mira site as it should be.jpg
As you notice the logo and menu aren't next to eachother because there is no space. I think the best is to reduce the whitespace between logo and the menu, the css is as following now:
.container .horizontalMenu {
float: right;
display:block;
margin-top:200px;
}


#logo {
float: left;
width:300px;
}
#logo img {
display: block;
height:auto;}

ofcourse the margin-top 200px makes sure the horizontal menu is nicely wrapped just above the container and next to the bottom of the logo. With different screen resolutions it seems like he puts the horiz menu 200px under the logo instead of 200px from the top of the page. Can we fix this in any way? Here is the entire css: Css Mira.txt

Also, you do notice the shadows I have in my screenshot, however the shadows aren't displayed in other browser or older versions of the same browser. It works on all my browsers, but I have the latest versions. No options there I guess but having latest versions?

Thanks a lot in advance!

Kind regards
Maxx-iT