UNIT 20 • STAGE 6 OF 7
The Polish
Fix anchor scrolling with scroll-margin-top, build the footer, and review the page at every screen size
scroll-margin-top: Fix the Nav Overlap
Your nav is fixed, it stays at the top of the screen as the user scrolls. That is a good user experience. But there is a problem: when someone clicks a nav link like #era-entries, the browser scrolls so the top of that section aligns with the top of the viewport. The section's heading gets hidden behind the 64px nav.
scroll-margin-top adds invisible space above an element for scroll-targeting purposes only. It does not affect layout. It tells the browser: when scrolling to this element via anchor link, stop 80px short so the section appears below the nav.
scroll-margin-top: 80px; /* nav is 64px, 80px gives breathing room */
}
The selector section[id] is an attribute selector. It matches any section element that has an id attribute, regardless of what the id is. One rule applies to all four sections on the page. You have used this pattern in Units 17 and 18; now you are writing it yourself.
Why 80px when the nav is 64px?
Setting it exactly to the nav height (64px) would place the section's top edge flush against the bottom of the nav. A little extra space (80px) gives the eye room to land above the section heading. The 16px difference is just breathing room, adjust it to suit your taste.
Build the Footer
The footer closes the publication. It has three parts: the series brand on the left, a compact list of era links in the center, and attribution on the right. On mobile it stacks to a single column.
background: #070d14; /* slightly darker than --bg-main */
border-top: 1px solid var(--gold-border);
padding: 64px 32px;
}
.footer-grid {
max-width: 900px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr; /* mobile: single column */
gap: 40px;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: 2fr 1fr 1fr; /* desktop: 3 columns */
align-items: start;
gap: 48px;
}
}
The footer columns: (1) series name and tagline, (2) list of all eight era links, (3) researcher name and a brief copyright line. Fill in your name in the attribution column.
Review at Every Screen Size
Use the pop-out button (top right of the Live Preview panel) to open the page in a new tab. Then resize the browser window from narrow to wide and check each breakpoint. Look for:
- Nav era links at narrow widths, do they scroll horizontally, or do they overflow and break the layout?
- Hero title at the narrowest size, does
clamp()keep it readable, not too large? - Era entries on a phone-width screen, do they stack cleanly as a single column?
- About grid at tablet width, does the two-column layout activate cleanly at 768px?
- Footer at all three widths, does the three-column layout collapse cleanly to one column?
Adjust any values that feel off. This is the polish pass, small tweaks to spacing, font size, or gap that make the page feel finished. The goal is a page that looks considered at 380px and at 1400px.
Stage 6 Complete!
Anchor links work. The footer is in place. The page holds together at every screen size. Stage 7 is the final stage: relative file paths. You will update every href="#" placeholder in the nav and era entries to point to the actual era unit index.html files, connecting the homepage to the research series you built across Units 11 through 18.
© 2026 Relentless Feather. All rights reserved.