Position fixed content overlapping problem
You don't mention any other layout requirements you may have, but this would be a good start
content {position: relative; top: 95px}
Update
As the other good people state, <content> is not a valid HTML5 tag. Maybe it doesn't have to do with the specific question, but do follow their advice and avoid rolling your own tags. Use a standard one instead.
Follow those HTML5 tags, that are present. If you going to create your own, then that might have consequencies.
Here follow this.
<header>
</header>
<section>
</section>
<footer>
</footer>
To learn about valid HTML5 tags please follow this link.
The main reason is because the <header> is position:fixed taking it out of the document flow. You'll need to add margin or padding to either the <body> or your <content>(??) element. Also, if using HTML5 elements, add this to the top of your CSS rules for compatibility with older browsers.
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
Taken from Eric Meyer's CSS Reset.
Best solution use:
position: sticky;
top: 0;