div overlapping scrollbar

I had been working on the main menu in both OTL & the wp, and noticed that the horizontal spacing of the menu items differed. Then I noticed that the header was extending over the scrollbar in the static site OTL (but not in wp).

I soon realized that the only difference in the html between the two templates was a <div class="page"> with overflow: auto;, and determined this caused the header to extend over the scrollbar.

This first screencap shows the wp header (the intended result):

The second screencap shows the problematic header, as it overlaps the scrollbar. (Problematic due to the ‘jump’ in position between blog and non-blog pages):

 

The sole difference in the markup was that the static site (OTL) has a  <div class="page"> with overflow: auto;; when that attribute was removed, it was all good: