Teaching step

justify-content distributes free space — and sometimes there is none

EasyDistributing spaceF15

justify-content: center centred the toolbar perfectly on a wide screen and did nothing at all on a narrow one. No error, no warning, no difference.

Three 160px cards in a 720px rail. Put them in the middle as one group — touching each other, with the leftover space split evenly outside them. Then look at what the second probe does to the rail, because it is the part of this property that catches everybody out.

Hint

How much space is left over once the three cards have taken theirs, and what happens to that number when the rail gets narrower?

Live preview900×320

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="rail"><div class="card k1"></div><div class="card k2"></div><div class="card k3"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.rail { width: 720px; height: 100px; background: #16161d; }
.card { width: 160px; height: 48px; background: #ffd166; }
.k2 { background: #7bdff2; }
.k3 { background: #b5e48c; }