Find the cause of an overflow and fix it

01 / 05

When it spills, add up the widths

A sideways scrollbar, boxes overlapping, text cut off. However different they look, there is nearly always one cause: the contents add up to more than the box outside.

So the fix is settled too. Add up the total and find the thing that does not fit.

02 / 05

Cause 1 — a fixed width has survived

This is the commonest. Leave a width in numbers like width: 480px; somewhere and the moment the screen goes narrower than that, it spills.

The fix is a percentage. Decide that only containers may hold a width in numbers, and they are easy to find.

.panel {  width: 100%;}

03 / 05

Cause 2 — the space is outside the width

When the width is 100% and it still spills, the space or the border is being added on the outside. That is a box missing box-sizing: border-box;.

One box in a nest of boxes missing it and that one alone goes outside. Setting them all together is the sure way.

.inner, .panel, .card {  box-sizing: border-box;}

04 / 05

Cause 3 — a picture that will not shrink

A picture has a size of its own. Say nothing in CSS and it will not shrink even if it is bigger than the box outside.

Write width: 100%; and it fits itself to the box. On a page with photos, always write it.

.card img {  width: 100%;}

05 / 05

Work from the outside in

Fixing the order you look in makes it quicker.

the outermost band … has a width in numbers crept in?
the container … the width and the way space is counted
the cards … the percentages added up, and the space
the pictures … did you write 100%?

Outside inwards. Check the preview after every fix and you can see which one did the work. Have a go.