What You Are Adding

A navigation bar should be easy to scan and consistent on every page. Flexbox helps place navigation links in a row, add gaps and align the items neatly.

CSS To Add To css/style.css

Add or adapt this CSS in the stylesheet you created in Tutorial 1. Keep the HTML structure from Tutorial 1 and use CSS to improve the presentation.

nav ul {
    display: flex;
    gap: 14px;
    list-style: none;
    padding: 0;
}

nav a {
    display: inline-block;
    padding: 10px 14px;
    background-color: #365fd0;
    color: white;
    text-decoration: none;
    border-radius: 8px;
}

Build It Yourself

1. Open the same unit-6-website folder from Tutorial 1.
2. Add or update the relevant HTML class names if this page uses classes.
3. Add the CSS shown above to css/style.css.
4. Save the stylesheet and refresh the website in the browser.
5. Compare your page with the expected output preview.

Common Mistakes

• Editing the HTML page but forgetting to save css/style.css.
• Using a different class name in HTML and CSS.
• Adding lots of one-off styles instead of reusing clear selectors.

Success Checklist

• The CSS has been added to css/style.css.
• The page still uses the Tutorial 1 HTML structure.
• The result is close to the expected output preview.
• The page remains readable and easy to use.