How can I achieve fluid margins on my site with CSS?

Question

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;
}

Answer 1

Remove min-width on the body. If the minimum width for the body is greater than your content wrapper, scrollbars will show before the fluid margins can do their thing.

Change the margins on div#wrapper-inner to:

margin: 25px 0; //previous values had 100px margins for left/right which add to width per box model

Finally, adjust div#wrapper-outer to the width of your content like SLaks suggested.

Answer 2

You need to add a fixed width to the centered wrapper.

Answer 3

Just add a percentage margin to your col-1 div so your margins adapt fluidly.

Something like 8% looks good.

CSS

#col-1 {
 margin-right: 8%;
}

Also, remove the margin declaration on your col-2 div so your margins adapt proportionally.