How to make the width of my CSS wrapper relative to monitor size?

Question

I am trying to center the logo at the top of my HTML page using CSS. I created a wrapper, but instead of fixing the width, is there a way to make the width relative to the screen size? If I assign a width to anything other than a fixed pixel, my image hugs the left side of the screen (and will look funky on other screens).

Here is my code:

#wrapper {
    background-color: #000;
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
}
#wrapper #logo {
    height: 292px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: block;
    margin: 0 auto;
}

Obviously, the logo is centered only on screens with a browser width of 800. Thus, on my monitor with a width of 1024, it tilts to the left.

Does anyone know what I need to do?

Thank!

EDIT: still not centered with this code:

http://jsfiddle.net/mFj3W/

any ideas?

Answer 1

, , .

http://jsfiddle.net/FKQFX/