Problem description

Given an HTML page with a <header> element followed by a long <div> of content, apply CSS so that the header sticks to the top of the viewport when the user scrolls down.

Goal

Use only CSS to implement a sticky header that stays at the top of the page as content scrolls underneath it.

Constraints

• Make sure to use CSS position: sticky.

• No JavaScript is allowed.

• Header width must span 100% of the viewport.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.