meet it

lets a box stretch, but only so far.

A width in % is a share of the parent's width, so width: 50% takes half the space and changes as the window changes. That suits phones and big screens alike.

max-width sets a limit instead: the box stretches to fit, but never grows past it. max-width: 600px stops long lines of text getting too wide to read.

To centre a box, give it a width or max-width and . The 0 is for the top and bottom. auto lets the browser share the space left over equally between left and right.

<div class="page">This box stretches with the window, stops at 400px and sits in the middle.</div>

.page {
  max-width: 400px;
  margin: 0 auto;
  padding: 16px;
  background-color: mintcream;
}

Press show my page to see it here.

If your window is narrower than 400px, the box shrinks to fit.

guess first

Half of what? Guess the width.

Guess before you run it. Wrong guesses are how you learn, and nothing is marked.

<div class="outer">
  <div class="inner">Inner box</div>
</div>

.outer {
  width: 400px;
}
.inner {
  width: 50%;
}

your turn

Your turn. Tame a wide paragraph.

Stop the paragraph growing wider than a limit you choose between 300px and 600px. The margin line already centres it.

the page you’re styling

<p>Otters hold hands while they sleep so that they do not drift apart. A group of otters floating together is called a raft.</p>

your css

Your code

Press show my page to see it here.

the paragraph stops at 300px to 600pxnot checked yet

fix it

The box will not shrink on a phone. Can you fix it?

the page you’re styling

<div class="panel">Read our news on any screen.</div>

your css

Broken code to fix

Press show my page to see it here.

the panel can shrink but stops at 600pxnot checked yet

width fixes the size, so the box can never shrink on a small screen.
You want a limit, not a fixed size. Which property sets a limit?
Change width to max-width, then press run.

nailed it

your boxes stretch, but not too far. :D

A width in % is a share of the parent's width.
max-width lets a box stretch up to a limit.
margin: 0 auto centres a box that has a width.

new words in your collection

max-width
auto

This lesson isn’t saved. A free account remembers every lesson you finish.

max-width lets a box stretch, but only so far.

Half of what? Guess the width.

Your turn. Tame a wide paragraph.

The box will not shrink on a phone. Can you fix it?

your boxes stretch, but not too far. :D

lets a box stretch, but only so far.