title: Why is my header-bar overlapping scrollbar
body: <p>I've tried looking at already existing questions but none of the solutions in them worked for me. Basically, my header-bar(which is supposed to be across the entire screen) is overlapping the scrollbar - and I can't seem to get it UNDER the scrollbar, which is what I want.</p>
  
  <p><img src="https://i.stack.imgur.com/rimQA.png" alt="Overlapping"></p>
  
  <p><a href="http://jsfiddle.net/9cnXN/2/" rel="nofollow noreferrer">http://jsfiddle.net/9cnXN/2/</a></p>
  
  <p><a href="http://jsfiddle.net/9cnXN/2/embedded/result/" rel="nofollow noreferrer">http://jsfiddle.net/9cnXN/2/embedded/result/</a></p>
  
  <p>This is using Rockmelt as browser.
  I can also confirm problem on FireFox latest version as well as Chrome.</p>