Problem description

You have an HTML page divided into a sidebar and a main content area. On desktop screens (width ≥ 768px), the sidebar should position: sticky to the top of the viewport as the user scrolls the page. On mobile screens (width < 768px), the sidebar should scroll normally with the page content (position: static).

Goal

Implement CSS rules to make the sidebar sticky on larger screens and static on smaller ones, without using JavaScript.

Constraints

• Use CSS only; no JavaScript is allowed.

• Use position: sticky for the sidebar at desktop breakpoints.

• Define the mobile/desktop breakpoint at 768px.

• Reference styles.css for all CSS.

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.