Teaching step

gap spaces items without touching them

EasyGapF27

A :last-child { margin-right: 0 } rule, a negative margin on the wrapper to cancel the outer ones, and a bug filed because the last card was 24px short.

Four tiles in a row. Put 24px between neighbours and nothing at the ends, so the first tile is flush against the left edge of the row and the last is flush against the right. Then check both probes. One widens the row and one squeezes it — a real answer holds both, and two of the three obvious wrong ones only hold at 552px.

Hint

Is 24px a distance between two tiles, or a share of whatever space is left over? Which of those two does the value you picked describe?

Live preview800×300

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="row"><div class="tile g1"></div><div class="tile g2"></div><div class="tile g3"></div><div class="tile g4"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.row { width: 552px; height: 100px; background: #16161d; }
.tile { width: 120px; height: 48px; background: #ffd166; }
.g2 { background: #7bdff2; }
.g3 { background: #b5e48c; }
.g4 { background: #f4a4c0; }