Put a cap on so it cannot spread too far

01 / 05

On a wide screen it stretches too far

width: 100%; means "as wide as the parent". Welcome on a narrow screen, but on a big one the text stretches from edge to edge.

When a line is too long the eye loses the start of the next one. Wider is not simply better.

02 / 05

max-width is a "this far" line

max-width sets an upper limit. It will not go beyond the value you wrote, and on a screen narrower than that it shrinks properly.

Writing it as a pair with width: 100%; is the standard shape.

.container {  width: 100%;  max-width: 640px;}

03 / 05

How it differs from width

width: 640px; is fixed. On a 400px screen it spills out and you get a sideways scrollbar.

With max-width: 640px;:

wide screen … it stops at 640px
narrow screen … it shrinks to fit

This setting ties one side only.

04 / 05

It stops pictures spilling out too

A picture shows at its own size, so a picture bigger than its parent spills out. Write max-width: 100%; and you have the limit "never bigger than the parent".

It may be the single most used line in coping with width.

.frame img {  max-width: 100%;}

05 / 05

Let the contents decide the cap

About 600 to 700px for text, wider where you are showing photographs. The cap is whatever width suits what is inside.

Have a go.