Question

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 http://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;

    /* undo text-align on container */
    text-align: center;
    /* centering for other browsers */
    margin: auto;

}

#headercolor {
    background-color:#EEEEEE;
}



</style>

Thank you

Answer 1

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.