All repair missions / Mission 04
Fix this page
Let the navigation wrap
Repair navigation that overflows a narrow screen.
Your goal
Keep all three links visible inside a 240px navigation region. Let the links wrap instead of clipping, scaling or shrinking the words.
Edit a short HTML fragment or CSS rules. Changes apply when you press Update preview or Check my repair. Scripts and external resources are excluded. Fragment links and the supplied landscape image are supported. Edits stay in this page’s memory; reloading starts again.
Your working preview
Check your repair when you are ready.
Read one possible solution
<nav class="practice-nav"><a href="#home">Home</a><a href="#projects">Projects</a><a href="#contact">Contact</a></nav><h2 id="home">Home</h2><p id="projects">Projects to explore.</p><p id="contact">Contact the author.</p>.practice-nav { display: flex; flex-wrap: wrap; width: 240px; gap: 24px; }
.practice-nav a { padding: 20px; color: #80eee0; }Wrapping gives complete links another row when the current row is full. Each link remains usable at its original text size.
Starting code and all hints
<nav class="practice-nav"><a href="#home">Home</a><a href="#projects">Projects</a><a href="#contact">Contact</a></nav><h2 id="home">Home</h2><p id="projects">Projects to explore.</p><p id="contact">Contact the author.</p>.practice-nav { display: flex; width: 240px; gap: 24px; white-space: nowrap; }
.practice-nav a { padding: 20px; color: #80eee0; }- The combined link widths exceed 240px.
- Flex containers do not wrap by default.
- Add flex-wrap: wrap to .practice-nav.