title: Bring header on top of everything
body: <p>On this page <a href="http://goo.gl/m2s1dA" rel="nofollow">http://goo.gl/m2s1dA</a></p>
  
  <p>I want to bring the whole header layer "header-container" as below on top of everything and anything inside of "container-site" should appear behind the header when scrolling.</p>
  
  <p>Below is my code.</p>
  
  <p>Full width div</p>
  
  <pre><code>.header-container {
      position: fixed;
      width: 100%;
      z-index: 10000;
  }
  </code></pre>
  
  <p>Fixed width div to center align header and some styling</p>
  
  <pre><code>.header-wrapper {
      margin-bottom: -1px;
      border-radius: 0;
      border-bottom: 1px solid #cc6666;
      height: 263px;
      position: relative;
      display: block;
      width: 1140px;
      margin: 0px auto;
  }
  </code></pre>
  
  <p>Then body of the page</p>
  
  <pre><code>.container-site {
      margin: 0px auto;
      width: 1140px;
      padding-top: 280px;
  }
  </code></pre>
  
  <p>Currently only the headings (h1, h2, h3) are appearing behind the header. I am using Bootstrap.</p>