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

I am trying to center a logo at the top of my HTML page using CSS. I created a wrapper, but instead of fixing a width, is there a way I can make the width relative to screen size? If i assign the width to anything other than a fixed pixel, my image hugs the left 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;
}

开发者_StackOverflow中文版

Obviously, the logo is centered only on screens whose browser has a width of 800. So in my 1024 width monitor, it skews to the left.

Anyone know what I need to do?

Thanks!

EDIT: Still not centering with this code:

http://jsfiddle.net/mFj3W/

any ideas?

---

You may want to assign a percentage to the width rather than a fixed pixel width.

http://jsfiddle.net/FKQFX/