On my site, I have a fixed-width central wrapper, which I don't want to change in size, but I do want to margins to be resized depending on the size of the user's screen. I tried wrapping everything in one div called wrapper-outer and then centering it by margin: 0 auto but it doesn't seem to work. 

Site: <http://antonpug.com/mainepark/>

CSS:

```
    body {
    font-family: "Nobile", sans-serif;
    font-size:0.75em;
    text-align:center;
    min-width:1550px;
}

img#bg {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
}

h3 {
    font-size:1.25em;
}

header h1, header h2 {
    font-family: "Ubuntu", sans-serif;
}

header h1 {
    font-size:3em;
    margin:25px 0 0 0;
}

header h2 {
    font-size:2em;
    margin:0 0 25px 0;
}

#wrapper-inner {
    margin:25px 100px 25px 100px;
    padding:15px 0 15px 0;
    background-color:rgba(255,255,255,0.75);
    moz-border-radius: 10px;
    webkit-border-radius: 10px;
    border-radius: 10px;
}

#wrapper-outer {
    width:1500px; -- that didn't work either!!!
    margin: 0px auto;
}

#feature {
    display:inline-block;
    width:80%;
    margin:15px;
}

.column {
    display: inline-block;
    vertical-align:top;
    width:600px;
    margin:15px;
}

#col-1 {
    text-align:right;
}

#col-2 {
    text-align:left;
}

.section {
    margin:0 0 25px 0;
    height:450px;
}

footer {
    color:#909090;
}

footer a {
    margin: 0 0 25px 0;
    text-decoration:none;
    color:#909090;
}

```