Please use the Question Tags to state the name and full version number of Story Format you are using, as answers can vary based on this information. I will assume you are using Harlowe v2.1.0
> The words go over the header..
Based on the CSS example you suppled I will assume that when you say 'header' you mean a HTML <header> element, and not a Harlowe header tagged special passage.
The position: fixed setting in your CSS causes the <header> element to be removed from the standard layout of the page's HTML element, which results in the <header> element being shown at a higher z-index than the rest of the content of the current passage. This is why scrolling the content of the passage causes it to move underneath the content of the <header> element.
You can do a couple of things you can add you your CSS to reduce this visual effect:
1. Add a width: 100%; property which will cause the area representing the <header> to always cover the whole width of the passage it appears above.
2. Add a top: 0; property which will move the <header> element's area to the top of the web-browser's view-port.
3. Add a padding-bottom: 1em; property which will add a small horizontal blank section to the bottom of the area representing the <header> element.