title: Fixed position sidebar with left: 50%; moving off the left side on small window sizes
body: <p>I've got a fixed position sidebar:</p>
  
  <pre><code>.sidebar {
    position: fixed;
    top: 51px;
    left: 50%;
    min-height: 100%;
    width: 225px;
    margin-left: -470px;
    padding-top: 24px;
    background: url('images/side-bg.jpg') no-repeat;
    overflow: hidden;
    z-index: 20;
  }
  </code></pre>
  
  <p>within a <code>margin: 0 auto;</code>'d container:</p>
  
  <pre><code>#outside_container {
    position: relative;
    min-height: 100%;
    width: 1022px;
    margin: 0 auto;
  }
  </code></pre>
  
  <p>So far the <code>left:50%;</code> trick with a negative left margin is working well to center it with the rest of the site. However, when the browser window size is reduced to narrower than the site width, the nav scurries off to the left until you can't see it anymore. Try it here: <a href="http://ravictilanding.cbstage.com/" rel="nofollow">http://ravictilanding.cbstage.com/</a></p>
  
  <p>What can I do to stop this behavior while nonetheless keeping it fixed at normal widths?</p>