Back to Unit 6

Unit 6 Website Development - Tutorial 2

2.12 Use max-width to stop content becoming too wide

Keep long text readable on large screens.

What You Are Adding

Max-width sets the largest size an element can become. It is useful for main content because very wide paragraphs are harder to read. Combine max-width with margin auto to centre the content.

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.

main {
    max-width: 1000px;
    margin: 0 auto;
}

p {
    max-width: 70ch;
}

Expected Output

This paragraph stops at a readable width and sits neatly in the centre of the page.

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

Success Checklist