title: Position left sidebar with CSS
body: <p>I am trying to design a layout with a left sidebar and a centered header. I have the header and sidebar in a wrapper div so that they can be centered on the page, but I want the sidebar to be a little left of the header like in this screenshot<img src="https://i.stack.imgur.com/WSnp2.gif" alt="enter image description here"></p>
  
  <p>How can I achieve this? Right now, when I re-size the window, the sidebar won't follow the header. Any help would be appreciated, I am still learning CSS. Thanks.</p>
  
  <p>Here is my HTML and CSS (note: I had a margin: 0 auto 0 15px for the nav but took it out):</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrapper"&gt;
      &lt;header&gt;
  
      &lt;/header&gt;
  
      &lt;nav&gt;
          &lt;ul&gt;
  
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    body {
      margin:0;
      padding: 5px;
      background-color: #121212;
  }
  
  #wrapper {
      margin:0 auto 0 auto;
      width:1024;
  }
  
  header {
      /* IE10 Consumer Preview */ 
      background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* Mozilla Firefox */ 
      background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* Opera */ 
      background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* Webkit (Safari/Chrome 10) */ 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
  
      /* Webkit (Chrome 11+) */ 
      background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* W3C Markup, IE10 Release Preview */ 
      background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
  
      width: 768px;
      height:100px;
      border-radius: 4px;
      border: 2px solid #adadad;
      margin:0 auto 0 auto;
  }
  
  nav {
      /* IE10 Consumer Preview */ 
      background-image: -ms-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* Mozilla Firefox */ 
      background-image: -moz-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* Opera */ 
      background-image: -o-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* Webkit (Safari/Chrome 10) */ 
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0C0DA6), color-stop(1, #0E0B58));
  
      /* Webkit (Chrome 11+) */ 
      background-image: -webkit-linear-gradient(top, #0C0DA6 0%, #0E0B58 100%);
  
      /* W3C Markup, IE10 Release Preview */ 
      background-image: linear-gradient(to bottom, #0C0DA6 0%, #0E0B58 100%);
  
      width:230px;
      height:235px;
      border-radius: 4px;
      border: 2px solid #adadad;
  
  }
  </code></pre>