I think it’s because you have a height in declared in the css for the header of 184px. The width is set to auto but that height is not reducing so it “looks” like there’s more space when actually it doesn’t move at all. Try eliminating that height and see what happens.
> If i change the height settings or even remove it, my menu bar(grey bg only) displays over the logo.
I don’t see that in Chrome or Firefox using the dev tools. What browser are you using?
Re. the huge space bewteen menu bar and logo:
When your first media query kicks in **.logo** and **.header-right** both get float: none. If you take .logo out of that bit of CSS then the gap disappears. Hard to tell quite what’s going on though, below that you have these empty containers so hard to tell what changes would be needed if you start putting content in .top-social-profiles.