header background color and size

Hello I have a header that I am trying to get working and I just got the menu working correctly, but now I can't get the size working properly.

The header is located at www.g-evo.com/header.php and what I want to do is shrink the grey a little bit so its more flush with the logo. I still want to keep those coloured boxes in the white however.

The CSS looks as such:

<style type="text/css">
#header-container {
    /* centering for IE */
    text-align: center;

}
#menu {
    width: 950px;

    /* centering for other browsers */
    margin: auto;
}
#logo {
    width: 950px;
    /* undo text-align on container */
    text-align: left;
    /* centering for other browsers */
    margin: auto;
    border-style:hidden;
    border-width: thick;
}
body {
    width: 950px;

开发者_StackOverflow社区    /* undo text-align on container */
    text-align: center;
    /* centering for other browsers */
    margin: auto;

}

#headercolor {
    background-color:#EEEEEE;
}



</style>

Thank you

I believe this is actually a matter of your HTML markup, rather than your CSS. You have two #logo divs (as a side note, you should only use each ID once per page), the second of which is causing the extra gray space you are referring to.

You should put /header_media/GTextured.png and /header_media/shapeimage.png in the same div, and align them next to one another, which should solve your problem.

For starters, you're using the "logo" id on two different items on the same page... that's not correct, since the ID attribute should be unique per element.

On the other hand, I don't really understand what you want, but if it's just to get the menu a bit closer to the logo, I'd add a class or change the id for the second div with the logo ID and set it a height of 20px, or so..