title: How can I achieve fluid margins on my site with CSS?
body: <p>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. </p>
  
  <p>Site: <a href="http://antonpug.com/mainepark/" rel="nofollow">http://antonpug.com/mainepark/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>    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;
  }
  </code></pre>