A float-only parent has no height
The strip behind the thumbnails has no background. Inspecting it says 600 × 0. The three thumbnails inside it are clearly 120px tall, and the caption underneath has climbed up on top of them.
Three floated thumbnails in a strip, with a caption below. On screen the strip is 0px tall: its background never appears, and the caption is laid out as though the thumbnails were not there at all. Make the strip contain its thumbnails — 600 × 120, with the caption below them — and keep it correct when a thumbnail is a different height. There are at least three well-known answers to this and they are twenty years apart. All of them are accepted. It is worth knowing which one you are using and why it works.
Hint
`height: auto` measures the parent's content. Which of the parent's children count as content, and is a float one of them?
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="page"><div class="strip"><div class="thumb t1"></div><div class="thumb t2"></div><div class="thumb t3"></div></div><div class="caption"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; } .page { width: 600px; background: #0f0f14; } .strip { background: #2a2a36; } .thumb { float: left; width: 180px; height: 120px; margin-right: 20px; background: #7bdff2; } .t2 { background: #b5e48c; } .t3 { background: #ffd166; margin-right: 0; } .caption { height: 40px; background: #ff7ab6; }