Lesson 20: CSS max-width · Controlling How Wide Elements Can Grow

Phase 1 of 12

Lesson Introduction

Imagine you are reading an article on a large desktop monitor. Without any limits, the text would stretch from the far left edge of your screen all the way to the far right · one enormous, hard-to-read line. Your eyes would have to travel a huge distance to get from the end of one line to the beginning of the next. That is exhausting and uncomfortable.

Now imagine the same article with text that only takes up a comfortable central column, even on a wide screen. Your eyes barely move. Reading feels effortless.

That comfort is what max-width creates.

In this lesson you will learn:

What max-width is and the exact problem it solves
How max-width differs from width
How to combine max-width with margin: auto to centre elements
The difference between max-width and min-width
How to use max-width with images so they never overflow their containers
How max-width supports responsive design
All the values max-width accepts
How to use max-width in real-world page layouts

By the end, you will understand one of the most-used properties in professional CSS and will be able to apply it confidently in your own projects.

Prerequisite check: You should be comfortable with the CSS width and height properties, basic CSS selectors, and the concept of block-level elements (like <div>, <p>, <h1>). If you have completed the earlier lessons in this series, you are fully prepared.

✏️ Your Task

Practise what you just learned about Lesson Introduction. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 2 of 12

Prerequisite Concepts

What Is a Block-Level Element?

A block-level element is an HTML element that, by default, takes up the full width of its parent container. It also starts on a new line and pushes everything after it onto a new line.

Common block-level elements:

html

<div>, <p>, <h1>, <h2>, <h3>, <article>, <section>, <main>, <header>, <footer>

Because block-level elements naturally stretch to fill their full parent width, they can become very wide on large screens if nothing tells them to stop growing. max-width is the tool that controls that growth.

Quick Reminder: What Does `width` Do?

The width property sets a fixed, exact width for an element:

css

div {
  width: 500px;
}

This makes the <div> exactly 500 pixels wide · always. Even if the screen is only 300 pixels wide (like a small phone), the element still tries to be 500 pixels wide, causing the user to scroll sideways. That is a serious problem on mobile devices.

max-width solves this problem elegantly.

✏️ Your Task

Practise what you just learned about Prerequisite Concepts. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 3 of 12

Part 1: Understanding `max-width`

What Is `max-width`?

max-width sets the maximum width an element is allowed to reach. It says: "You can be as wide as your content or container allows, but never wider than this limit."

Think of it like a speed limit sign. A car can go slower than the speed limit · it can crawl, idle, or drive at any speed below it. But it may not exceed the posted limit.

Similarly, an element with max-width: 800px can be 200px wide, 500px wide, or 800px wide · but it will never exceed 800px, no matter how wide the screen is.

code

Screen width:  400px  → Element width: 400px   (fills available space, under the limit)
Screen width:  800px  → Element width: 800px   (exactly at the limit)
Screen width: 1200px  → Element width: 800px   (capped at max-width)
Screen width: 1920px  → Element width: 800px   (still capped)

Why Is This So Useful?

Without max-width, block-level elements stretch to fill their entire container. On a huge widescreen monitor, a paragraph of text would span the full width of the screen · perhaps 1,500 or 1,900 pixels wide. Readable line length for comfortable reading is roughly 600 · 900 pixels (about 60 · 80 characters per line). max-width enforces that comfortable limit automatically.

The Key Difference: `width` vs `max-width`

This is the most important concept in this lesson:

Property	Behaviour	Mobile result
`width: 800px`	Always exactly 800px, even on a 320px phone screen	Forces horizontal scrolling · bad!
`max-width: 800px`	Up to 800px wide, but shrinks on smaller screens	Naturally fits any screen · good!

css

/* RIGID — Breaks on small screens */
.box-fixed {
  width: 800px;
}

/* FLEXIBLE — Works on all screen sizes */
.box-flexible {
  max-width: 800px;
}

Analogy: width is like a wooden plank · it has one fixed length and cannot bend. max-width is like a rubber band · it can stretch up to its maximum length, but it also contracts naturally when there is less space.

Your First `max-width` Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>max-width Basics</title>
  <style>
    .box-no-limit {
      background-color: #f0a500;
      padding: 20px;
      margin-bottom: 20px;
    }

    .box-with-limit {
      background-color: #3a86ff;
      padding: 20px;
      max-width: 500px;
    }
  </style>
</head>
<body>

  <div class="box-no-limit">
    I have NO max-width. I stretch to fill the entire page width.
  </div>

  <div class="box-with-limit">
    I have max-width: 500px. I never grow wider than 500px, but I can be narrower on small screens.
  </div>

</body>
</html>

Expected Output:

On a wide screen (e.g. 1200px wide):

The orange box stretches the full 1200px width.
The blue box is exactly 500px wide (capped by max-width).

On a narrow screen (e.g. 350px wide):

The orange box stretches the full 350px width.
The blue box is also 350px wide · it shrank naturally below its max-width limit to fit the screen.

Thinking prompt: What would happen to the blue box if you resized your browser window to be narrower than 500px? It would shrink to fit the window. What would happen if you had used width: 500px instead? The box would overflow and cause horizontal scrollbars.

✏️ Your Task

Practise what you just learned about : Understanding max-width. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 4 of 12

Part 2: `max-width` with `margin: auto` · Centring Elements

The Problem: Left-Aligned by Default

When you apply max-width to a block-level element, it caps the width · but the element stays aligned to the left by default.

css

.container {
  max-width: 700px;
  background-color: #e0e0e0;
  padding: 20px;
}

On a 1200px screen, this creates a 700px grey box stuck to the left side of the page. It works, but it looks unbalanced.

The Solution: `margin: auto`

Adding margin: auto to a block element with a defined (or max) width makes the browser automatically distribute the remaining space equally on the left and right sides, which centres the element.

css

.container {
  max-width: 700px;
  margin: auto;           /* or: margin: 0 auto; */
  background-color: #e0e0e0;
  padding: 20px;
}

How margin: auto calculates the centering:

code

Page width:     1200px
Element width:   700px
Leftover space:  500px

margin: auto → left margin = 250px, right margin = 250px
Result: element is perfectly centred.

Full Example · Centred Content Container

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Centred Container</title>
  <style>
    body {
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 700px;
      margin: 0 auto;          /* 0 = top/bottom margin, auto = left/right */
      background-color: white;
      padding: 30px 40px;
      border: 1px solid #ddd;
      border-radius: 8px;
    }

    h1 {
      color: #333;
    }

    p {
      color: #555;
      line-height: 1.7;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>Welcome to My Article</h1>
    <p>
      This container has a max-width of 700px. On wide screens it appears as
      a centred column. On narrow screens it shrinks to fill the available
      space. This is a very common pattern used on almost every modern website.
    </p>
    <p>
      Notice how the text never stretches uncomfortably wide. This makes it
      much easier to read on large desktop monitors.
    </p>
  </div>

</body>
</html>

Expected Output: A white, centred card with a subtle border and rounded corners sits on a light grey background. On a wide screen, the card is 700px wide with equal grey space on both sides. On a narrow screen, the card fills the available width.

Line-by-line explanation:

max-width: 700px; · Caps the container width at 700 pixels.
margin: 0 auto; · The 0 sets zero margin on the top and bottom. The auto sets equal, automatic margins on the left and right, which centres the box.
padding: 30px 40px; · 30px of breathing room on top/bottom, 40px on left/right, so text does not press against the edges.
border-radius: 8px; · Softly rounds the corners of the container.

Important note: margin: auto only works for centring block-level elements that have a defined width or max-width. It does not work for centring inline elements or elements without a width constraint.

✏️ Your Task

Practise what you just learned about : max-width with margin: auto · Centring Elements. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 5 of 12

Part 3: How `max-width` Compares to `width` in Detail

Let's put both properties side by side in a real demonstration to feel the difference clearly:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>width vs max-width</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    /* Box 1: Fixed width — WILL overflow on small screens */
    .box-fixed {
      width: 600px;
      background-color: #ffadad;
      padding: 20px;
      margin-bottom: 15px;
    }

    /* Box 2: max-width — adapts gracefully */
    .box-max {
      max-width: 600px;
      background-color: #caffbf;
      padding: 20px;
      margin-bottom: 15px;
    }

    /* Box 3: max-width + centred */
    .box-max-centred {
      max-width: 600px;
      margin: 0 auto 15px auto;
      background-color: #9bf6ff;
      padding: 20px;
    }
  </style>
</head>
<body>

  <div class="box-fixed">
    Box 1 — width: 600px (always 600px — overflows small screens)
  </div>

  <div class="box-max">
    Box 2 — max-width: 600px (up to 600px — shrinks on small screens)
  </div>

  <div class="box-max-centred">
    Box 3 — max-width: 600px + margin: auto (centred on wide screens)
  </div>

</body>
</html>

Expected Output (on a 1000px screen):

Red box: stretches to exactly 600px, aligned left.
Green box: stretches to exactly 600px, aligned left.
Blue box: stretches to exactly 600px, centred on the page.

Expected Output (on a 400px screen):

Red box: 600px wide · overflows off the right side of the screen, creating a horizontal scrollbar. ❌
Green box: 400px wide · naturally shrinks to fit the screen. ✅
Blue box: 400px wide · naturally shrinks to fit, still centred. ✅

✏️ Your Task

Practise what you just learned about : How max-width Compares to width in Detail. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 6 of 12

Part 4: Understanding `max-width` Values

max-width accepts several types of values. Each has a specific use:

1. Pixel Values (`px`)

A fixed pixel cap. The element will never exceed this many pixels.

css

.article {
  max-width: 800px;
}

Use when: You know the exact maximum size you want, such as a readable article column.

2. Percentage Values (`%`)

A percentage of the parent element's width. As the parent grows or shrinks, the max-width adjusts proportionally.

css

.sidebar {
  max-width: 30%;
}

Use when: You want the max-width to be relative to the surrounding layout.

3. `none` (the default)

max-width: none means there is no maximum width limit. The element can grow as wide as its container allows. This is the default value for every element.

css

.full-width {
  max-width: none;   /* No limit — this is the default */
}

Use when: You want to remove a previously set max-width, such as overriding a general rule for a specific element.

4. `fit-content`

The element sizes itself to fit its content, but will not exceed its parent's width.

css

.badge {
  max-width: fit-content;
  background-color: #0070f3;
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
}

5. `min-content` and `max-content`

These are advanced values that size the element based on its content's minimum or maximum natural width. We will cover them fully in later lessons.

6. Viewport Width (`vw`)

vw stands for viewport width. 1vw equals 1% of the viewport (browser window) width.

css

.hero-section {
  max-width: 90vw;   /* Never wider than 90% of the browser window */
}

✏️ Your Task

Practise what you just learned about : Understanding max-width Values. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 7 of 12

Part 5: `max-width` with Images

The Problem: Images Overflow Their Containers

By default, images display at their natural (original) size. If you have a 1200px wide image inside a 400px container, the image overflows way beyond the container's edge.

html

<!-- Without max-width — image overflows! -->
<div style="width: 400px; border: 2px solid red;">
  <img src="photo.jpg">
  <!-- If photo.jpg is 1200px wide, it overflows 800px beyond the box -->
</div>

The Solution: `max-width: 100%` on Images

The single most important CSS rule you can apply to images for responsive design:

css

img {
  max-width: 100%;
}

This single line means: "The image can be as wide as its natural size, but it must never exceed 100% of its container's width."

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Images with max-width</title>
  <style>
    .narrow-container {
      width: 300px;
      border: 2px solid #333;
      padding: 10px;
      margin-bottom: 20px;
    }

    /* Without this rule, a large image would overflow */
    img {
      max-width: 100%;
      height: auto;   /* Keeps the image proportions correct */
      display: block;
    }
  </style>
</head>
<body>

  <div class="narrow-container">
    <p>Image constrained to container width:</p>
    <img src="https://via.placeholder.com/800x400" alt="Example wide image">
  </div>

</body>
</html>

Expected Output: The image (originally 800px wide) is shown inside a 300px container. Instead of overflowing, it shrinks to exactly 300px wide, maintaining its correct proportions (height adjusts automatically due to height: auto).

Why height: auto is important: When you shrink an image's width, you must also let the height adjust naturally. If you set max-width: 100% but leave height at its natural value, the image will appear squashed horizontally. height: auto tells the browser: "Recalculate the height proportionally whenever the width changes."

This is one of the most universally used CSS rules in professional web development. Many developers include img { max-width: 100%; height: auto; } in every project's base CSS as a default rule.

✏️ Your Task

Practise what you just learned about : max-width with Images. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 8 of 12

Part 6: `min-width` vs `max-width`

Now that you understand max-width, let us compare it with min-width · they are related but solve opposite problems:

Property	What it controls	Analogy
`max-width`	The MAXIMUM the element can grow to	Speed limit · "Don't go above this"
`min-width`	The MINIMUM the element will shrink to	Height requirement · "You must be at least this tall"

`min-width` Example

css

.button {
  min-width: 150px;    /* Button is never narrower than 150px */
  padding: 10px 20px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 5px;
}

A short button label like "OK" would naturally be tiny. min-width: 150px ensures the button always looks like a proper button, even with short text.

Using Both Together

You can use min-width and max-width at the same time to create a flexible range:

css

.sidebar {
  min-width: 200px;    /* Never shrinks below 200px */
  max-width: 350px;    /* Never grows beyond 350px */
}

This tells the browser: "The sidebar must stay between 200px and 350px wide. Smaller screens can go down to 200px, and larger screens can go up to 350px, but neither beyond their respective limits."

Full Comparison Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>min-width vs max-width</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
    }

    .demo-box {
      padding: 20px;
      margin-bottom: 15px;
      color: white;
      font-size: 14px;
    }

    /* Only max-width */
    .only-max {
      max-width: 400px;
      background-color: #e63946;
    }

    /* Only min-width */
    .only-min {
      min-width: 400px;
      background-color: #457b9d;
    }

    /* Both together */
    .both {
      min-width: 200px;
      max-width: 400px;
      background-color: #2a9d8f;
    }
  </style>
</head>
<body>

  <div class="only-max demo-box">
    max-width: 400px only.
    On wide screens I am 400px. On narrow screens I shrink.
  </div>

  <div class="only-min demo-box">
    min-width: 400px only.
    I never shrink below 400px. I can grow wider than 400px.
  </div>

  <div class="both demo-box">
    min-width: 200px AND max-width: 400px.
    I stay within this range on all screens.
  </div>

</body>
</html>

Expected Output (on a 600px screen):

Red box: 400px wide (at its maximum).
Blue box: stretches to 600px (no maximum set).
Green box: 400px wide (at its maximum, within range).

Expected Output (on a 250px screen):

Red box: 250px wide (shrank to fit).
Blue box: 400px wide (refuses to shrink below minimum, causes overflow).
Green box: 250px wide (shrank, still above its 200px minimum · it is within range).

✏️ Your Task

Practise what you just learned about : min-width vs max-width. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 9 of 12

Part 7: `max-width` in Real-World Page Layouts

The max-width + margin: auto pattern is the foundation of almost every modern website's layout. Let's look at how professionals use it.

Pattern 1 · The Page Wrapper / Container

The most common use of max-width in all of web development:

css

/* The universal "page wrapper" pattern */
.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;     /* Side padding prevents content from touching screen edges on mobile */
}

Every major section of the page is wrapped in this class. On a 1440px monitor, content is 1200px wide and centred with 120px of margin on each side. On a 375px phone, content fills the screen width minus the 20px side padding.

html

<header>
  <div class="wrapper">
    <nav>...</nav>
  </div>
</header>

<main>
  <div class="wrapper">
    <article>...</article>
  </div>
</main>

<footer>
  <div class="wrapper">
    <p>Footer content</p>
  </div>
</footer>

Pattern 2 · The Readable Article Column

Articles and blog posts use a narrower max-width for ideal reading comfort (60 · 80 characters per line):

css

.article-body {
  max-width: 680px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.8;
  color: #333;
}

Pattern 3 · Constrained Form Width

Forms that are too wide look unprofessional and are hard to fill in:

css

.form-container {
  max-width: 500px;
  margin: 40px auto;
  padding: 30px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

Pattern 4 · Responsive Card Grid

Individual cards in a grid often use max-width to prevent them from growing awkwardly wide in large grid cells:

css

.card {
  max-width: 380px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

✏️ Your Task

Practise what you just learned about : max-width in Real-World Page Layouts. Open your editor, type the examples above by hand, modify them, and observe what changes.

Phase 10 of 12

Part 8: Guided Practice Exercises

🎯 Your Challenge

Exercise 1 · Fix the Broken Layout

Objective: Understand why max-width is better than width for responsive pages.

Scenario: A developer has built a blog post page with width: 900px on the article. On mobile, users have to scroll sideways to read. Your job is to fix it.

The broken code:

✏️ Task

- What happens if you change max-width: 480px to max-width: 700px? The form gets wider on large screens. - What happens if you remove margin: 0 auto? The form card snaps to the left edge. - Try adding min-width: 280px to .form-wrapper. Now the form never gets narrower than 280px. ·

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Blog Post</title>
  <style>
    body {
      font-family: Georgia, serif;
      background-color: #f9f9f9;
      padding: 20px;
    }

    .article {
      width: 900px;       /* ← This is the problem */
      background: white;
      padding: 40px;
      border: 1px solid #ddd;
    }

    h1 { color: #222; }
    p  { line-height: 1.8; color: #444; }
  </style>
</head>
<body>
  <div class="article">
    <h1>The Art of Slow Travel</h1>
    <p>
      Slow travel is about more than just moving at a leisurely pace.
      It is a philosophy of deep engagement with each place you visit.
      Instead of ticking off landmarks, you sit in a café for hours,
      strike up conversations with locals, and let a city reveal itself
      to you gradually.
    </p>
    <p>
      When you travel slowly, you notice the rhythm of a neighbourhood —
      the morning sounds, the way light falls on a particular street corner
      in the afternoon, the smell of street food in the evening. These are
      the moments that photographs cannot capture.
    </p>
  </div>
</body>
</html>

Your task: Fix the .article CSS so the article:

Has a maximum width of 900px (not a fixed width)
Is centred on the page
Works correctly on both wide and narrow screens

Solution:

css

.article {
  /* OLD (broken): width: 900px; */
  max-width: 900px;     /* Changed: now it can shrink on small screens */
  margin: 0 auto;       /* Added: centres the article on wide screens */
  background: white;
  padding: 40px;
  border: 1px solid #ddd;
}

What changed:

width: 900px → max-width: 900px: Allows the article to shrink below 900px on small screens instead of overflowing.
margin: 0 auto: Centres the article horizontally on screens wider than 900px.

Self-check Questions:

On a 600px screen, what width will the article be now? (Answer: 600px · it fills the available space, which is under the 900px max.)
On a 1400px screen, what width will the article be? (Answer: 900px · capped at its maximum.)
What would happen if you removed margin: 0 auto? (Answer: The article would be 900px wide but left-aligned on wide screens.)

Exercise 2 · Build a Centred Sign-Up Form

Objective: Create a responsive, centred sign-up form using max-width.

Scenario: You are building a sign-up page for a newsletter. The form should be centred, constrained to a comfortable width, and work well on both mobile and desktop.

Steps:

Create a page with a light background.
Create a .form-wrapper div that is centred with max-width: 480px.
Inside, add a heading, a short description, and input fields for Name and Email.
Add a submit button that spans the full width of the form.

Solution:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Newsletter Sign-Up</title>
  <style>
    * {
      box-sizing: border-box;   /* Makes padding not add to total width */
    }

    body {
      font-family: 'Segoe UI', Arial, sans-serif;
      background-color: #eef2f7;
      margin: 0;
      padding: 40px 16px;      /* 16px side padding prevents edge-hugging on mobile */
    }

    /* THE KEY PATTERN: max-width + margin auto */
    .form-wrapper {
      max-width: 480px;
      margin: 0 auto;
      background-color: white;
      border-radius: 12px;
      padding: 40px 36px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .form-wrapper h2 {
      margin: 0 0 8px 0;
      font-size: 24px;
      color: #1a1a2e;
    }

    .form-wrapper p {
      margin: 0 0 28px 0;
      color: #666;
      font-size: 15px;
      line-height: 1.5;
    }

    label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      color: #333;
      margin-bottom: 6px;
    }

    input {
      width: 100%;             /* Input fills the form wrapper */
      padding: 12px 14px;
      font-size: 15px;
      border: 1.5px solid #ccc;
      border-radius: 7px;
      margin-bottom: 20px;
      outline: none;
    }

    input:focus {
      border-color: #4361ee;
    }

    .btn-submit {
      width: 100%;             /* Button spans full form width */
      padding: 14px;
      background-color: #4361ee;
      color: white;
      font-size: 16px;
      font-weight: 600;
      border: none;
      border-radius: 7px;
      cursor: pointer;
    }

    .btn-submit:hover {
      background-color: #3451d1;
    }
  </style>
</head>
<body>

  <div class="form-wrapper">
    <h2>Join Our Newsletter</h2>
    <p>Get weekly tips on web design and development, delivered to your inbox. No spam, ever.</p>

    <label for="name">Full Name</label>
    <input type="text" id="name" placeholder="e.g. Alex Johnson">

    <label for="email">Email Address</label>
    <input type="email" id="email" placeholder="e.g. alex@example.com">

    <button class="btn-submit">Subscribe Now</button>
  </div>

</body>
</html>

Expected Output: A clean white card centred on a blue-grey background. It contains a heading, a description, two input fields (name and email), and a full-width blue button. On mobile, the card fills the width of the screen minus the 16px side padding from the body.

Key concepts demonstrated:

max-width: 480px + margin: 0 auto = centred card that adapts to small screens.
padding: 40px 16px on body = prevents content from touching screen edges on small devices.
width: 100% on inputs and button = they fill the card's width regardless of the card's current size.
box-sizing: border-box = ensures width: 100% includes padding, not just content area.

What-if challenges:

What happens if you change max-width: 480px to max-width: 700px? The form gets wider on large screens.
What happens if you remove margin: 0 auto? The form card snaps to the left edge.
Try adding min-width: 280px to .form-wrapper. Now the form never gets narrower than 280px.

Exercise 3 · Responsive Image Gallery

Objective: Use max-width: 100% to make images responsive inside a constrained layout.

Scenario: You are building a photo blog post with a text column and images. The images should never overflow their container and should scale naturally.

Solution:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Photo Blog Post</title>
  <style>
    * { box-sizing: border-box; }

    body {
      font-family: Georgia, serif;
      background-color: #fafafa;
      margin: 0;
      padding: 30px 16px;
    }

    /* Page wrapper — constrains content on wide screens */
    .post-wrapper {
      max-width: 720px;
      margin: 0 auto;
    }

    h1 {
      font-size: 32px;
      color: #222;
      margin-bottom: 8px;
    }

    .post-meta {
      color: #888;
      font-size: 14px;
      margin-bottom: 28px;
    }

    p {
      font-size: 18px;
      line-height: 1.8;
      color: #444;
      margin-bottom: 24px;
    }

    /* THE IMAGE RULE — makes all images responsive */
    img {
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
      margin: 24px 0;
    }

    .caption {
      font-size: 13px;
      color: #888;
      text-align: center;
      margin-top: -18px;
      margin-bottom: 28px;
      font-style: italic;
    }
  </style>
</head>
<body>

  <div class="post-wrapper">

    <h1>A Morning in the Mountains</h1>
    <p class="post-meta">By Sarah Okafor · April 20, 2026</p>

    <p>
      There is something particular about mountain mornings. The air has a
      quality you cannot find at sea level — thin, cold, and impossibly clear.
      Every breath feels deliberate.
    </p>

    <img src="https://via.placeholder.com/1200x600/87ceeb/333?text=Mountain+Sunrise" alt="Mountain sunrise">
    <p class="caption">Sunrise at 3,200m elevation. Photographed at 5:47am.</p>

    <p>
      I arrived at the trailhead before dawn, guided only by a headlamp and
      an old map I had printed the night before. By the time I reached the
      ridge, the sky had turned a shade of orange I have no word for in any
      language I speak.
    </p>

    <img src="https://via.placeholder.com/1200x450/f4a261/333?text=Mountain+Ridge" alt="Mountain ridge view">
    <p class="caption">The ridge at golden hour. The valley below was still in shadow.</p>

    <p>
      Walking back down, I passed three other hikers heading up. We exchanged
      the brief, knowing nods of people who had all made the same quiet
      decision to be somewhere beautiful before the rest of the world woke up.
    </p>

  </div>

</body>
</html>

Expected Output: A beautiful, readable blog post layout centred on the page. The two placeholder images span the full 720px width of the post wrapper. On a narrow screen (e.g. 400px), the images shrink proportionally to fit, never overflowing their container.

Self-check Questions:

What would happen to the images if you removed max-width: 100% from the img rule? (Answer: On screens narrower than the image's natural size, the image would overflow the container and the page.)
Why is height: auto included alongside max-width: 100%? (Answer: So the image's height adjusts proportionally when the width shrinks, maintaining the correct aspect ratio.)

Phase 11 of 12

Part 10: The `max-width` Code Challenges

These challenges correspond to the W3Schools CSS code challenges for max-width. Work through each one to solidify your understanding.

Challenge 1 · Set a Max Width on a `<div>`

Task: Given a <div> with id="myDIV", set its maximum width to 500 pixels.

html

<style>
  #myDIV {
    /* Your code here */
    background-color: lightblue;
    padding: 20px;
  }
</style>

<div id="myDIV">
  This div has a max-width of 500px.
</div>

Solution:

css

#myDIV {
  max-width: 500px;
  background-color: lightblue;
  padding: 20px;
}

Challenge 2 · Centre a `<div>` with `max-width`

Task: Set the <div> to a maximum width of 600px AND centre it horizontally on the page.

html

<style>
  #myDIV {
    /* Your code here */
    background-color: lightcoral;
    padding: 20px;
  }
</style>

<div id="myDIV">
  This div is max 600px wide and centred.
</div>

Solution:

css

#myDIV {
  max-width: 600px;
  margin: 0 auto;
  background-color: lightcoral;
  padding: 20px;
}

Challenge 3 · Remove a `max-width` Restriction

Task: A <div> has been given max-width: 300px. Override it so it has no maximum width restriction.

html

<style>
  #myDIV {
    max-width: 300px;
    /* Add a rule to remove the max-width restriction */
    background-color: lightgreen;
    padding: 20px;
  }
</style>

Solution:

css

#myDIV {
  max-width: none;    /* 'none' removes any max-width restriction */
  background-color: lightgreen;
  padding: 20px;
}

Challenge 4 · Responsive Image

Task: Make an <img> element responsive so it never overflows its container, and keeps its proportions.

html

<style>
  .container {
    width: 300px;
    border: 2px solid black;
    padding: 10px;
  }

  img {
    /* Your code here — make the image responsive */
  }
</style>

<div class="container">
  <img src="https://via.placeholder.com/800x400" alt="wide image">
</div>

Solution:

css

img {
  max-width: 100%;
  height: auto;
}

Challenge 5 · Combined `min-width` and `max-width`

Task: Style a <div> so it is never narrower than 200px and never wider than 500px.

html

<style>
  #myDIV {
    /* Your code here */
    background-color: lightyellow;
    padding: 20px;
  }
</style>

<div id="myDIV">
  I stay between 200px and 500px wide.
</div>

Solution:

css

#myDIV {
  min-width: 200px;
  max-width: 500px;
  background-color: lightyellow;
  padding: 20px;
}

✏️ Your Task

Task: Given a

with id="myDIV", set its maximum width to 500 pixels. `html

This div has a max-width of 500px.

` Solution: `css #myDIV { max-width: 500px; background-color: lightblue; padding: 20px; } ` ·

Phase 12 of 12

Part 11: Common Beginner Mistakes

Mistake 1 · Confusing `max-width` with `width`

css

/* WRONG: Fixed width — causes horizontal scrolling on small screens */
.article {
  width: 800px;
}

/* CORRECT: Flexible maximum — shrinks on small screens */
.article {
  max-width: 800px;
}

Why it matters: Using width instead of max-width is one of the most common causes of mobile layout issues. Always ask yourself: "Do I need this to be exactly this wide, or at most this wide?"

Mistake 2 · Forgetting `margin: auto` When Centring

css

/* WRONG: max-width is set, but element stays left-aligned */
.container {
  max-width: 800px;
}

/* CORRECT: max-width + margin: auto = centred */
.container {
  max-width: 800px;
  margin: 0 auto;
}

Visual result of the mistake: The container is the right width but sits in the top-left corner of the page instead of being centred.

Mistake 3 · Applying `max-width: 100%` to Containers (Redundant)

css

/* UNNECESSARY: Block elements already use 100% of their parent by default */
.wrapper {
  max-width: 100%;    /* This does nothing useful for a block element */
}

/* USEFUL: max-width: 100% is specifically powerful for images */
img {
  max-width: 100%;    /* This is genuinely important and widely used */
  height: auto;
}

Mistake 4 · Forgetting `height: auto` with `max-width: 100%` on Images

css

/* WRONG: Image width shrinks but height stays original — image looks squashed */
img {
  max-width: 100%;
}

/* CORRECT: Height adjusts proportionally */
img {
  max-width: 100%;
  height: auto;
}

Visual result of the mistake: When the image is constrained horizontally, it looks squashed or stretched because its height does not adjust to match.

Mistake 5 · `margin: auto` on Inline Elements Does Nothing

css

/* WRONG: <span> is inline — margin: auto has no centring effect */
span {
  max-width: 300px;
  margin: 0 auto;
}

/* CORRECT: Make it block-level first */
span {
  display: block;
  max-width: 300px;
  margin: 0 auto;
}

Why: margin: auto for horizontal centring only works on block-level elements with a defined width or max-width. Inline elements ignore these rules.

Mistake 6 · Using `max-width` Without Side Padding on Mobile

css

/* PROBLEMATIC: On small screens, content touches screen edges exactly */
.wrapper {
  max-width: 900px;
  margin: 0 auto;
  /* No padding — text touches left/right screen edges on mobile */
}

/* BETTER: Add side padding for breathing room */
.wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;   /* 20px breathing room on left and right */
}

Why it matters: Even with max-width, content on small screens fills the full width. Without side padding, text presses uncomfortably against the very edges of the screen.

✏️ Your Task

Practise what you just learned about : Common Beginner Mistakes. Open your editor, type the examples above by hand, modify them, and observe what changes.

🏗️ Build It — Mini Project

Project Goal

Build a professional, fully responsive blog post page that uses max-width as the core of its layout strategy. This is a real-world pattern used on sites like Medium, Substack, and every major news outlet.

Stage 1 · Page Foundation

starter.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog Post</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Georgia', serif;
      background-color: #f7f7f7;
      color: #333;
    }
  </style>
</head>
<body>
  <!-- Content coming next -->
</body>
</html>

Lesson 20 complete! 🎉

You covered:

✅ Lesson Introduction
✅ Prerequisite Concepts
✅ Part 1: Understanding `max-width`
✅ Part 2: `max-width` with `margin: auto` · Centring Elements
✅ Part 3: How `max-width` Compares to `width` in Detail
✅ Part 4: Understanding `max-width` Values
✅ Part 5: `max-width` with Images
✅ Part 6: `min-width` vs `max-width`

← Lesson 19 Lesson 21 →

CSS max-width · Controlling How Wide Elements Can Grow

👋 Welcome to Lesson 20

What Is a Block-Level Element?

Quick Reminder: What Does width Do?

What Is max-width?

Why Is This So Useful?

The Key Difference: width vs max-width

Your First max-width Example

The Problem: Left-Aligned by Default

The Solution: margin: auto

Full Example · Centred Content Container

1. Pixel Values (px)

2. Percentage Values (%)

3. none (the default)

4. fit-content

5. min-content and max-content

6. Viewport Width (vw)

The Problem: Images Overflow Their Containers

The Solution: max-width: 100% on Images

min-width Example

Using Both Together

Full Comparison Example

Pattern 1 · The Page Wrapper / Container

Pattern 2 · The Readable Article Column

Pattern 3 · Constrained Form Width

Pattern 4 · Responsive Card Grid

Exercise 1 · Fix the Broken Layout

Exercise 2 · Build a Centred Sign-Up Form

Exercise 3 · Responsive Image Gallery

Challenge 1 · Set a Max Width on a <div>

Challenge 2 · Centre a <div> with max-width

Challenge 3 · Remove a max-width Restriction

Challenge 4 · Responsive Image

Challenge 5 · Combined min-width and max-width

Mistake 1 · Confusing max-width with width

Mistake 2 · Forgetting margin: auto When Centring

Mistake 3 · Applying max-width: 100% to Containers (Redundant)

Mistake 4 · Forgetting height: auto with max-width: 100% on Images

Mistake 5 · margin: auto on Inline Elements Does Nothing

Mistake 6 · Using max-width Without Side Padding on Mobile

Project Goal

Stage 1 · Page Foundation

Lesson 20 complete! 🎉

Quick Reminder: What Does `width` Do?

What Is `max-width`?

The Key Difference: `width` vs `max-width`

Your First `max-width` Example

The Solution: `margin: auto`

1. Pixel Values (`px`)

2. Percentage Values (`%`)

3. `none` (the default)

4. `fit-content`

5. `min-content` and `max-content`

6. Viewport Width (`vw`)

The Solution: `max-width: 100%` on Images

`min-width` Example

Challenge 1 · Set a Max Width on a `<div>`

Challenge 2 · Centre a `<div>` with `max-width`

Challenge 3 · Remove a `max-width` Restriction

Challenge 5 · Combined `min-width` and `max-width`

Mistake 1 · Confusing `max-width` with `width`

Mistake 2 · Forgetting `margin: auto` When Centring

Mistake 3 · Applying `max-width: 100%` to Containers (Redundant)

Mistake 4 · Forgetting `height: auto` with `max-width: 100%` on Images

Mistake 5 · `margin: auto` on Inline Elements Does Nothing

Mistake 6 · Using `max-width` Without Side Padding on Mobile