Block formatting contexts
The pink body block is supposed to sit next to the thumbnail. It is 600px wide, starting at the far left, and the thumbnail is painted on top of it. Adding margin-left: 200px fixed it — until the thumbnail changed size.
A floated thumbnail and a block next to it. The block is running underneath the float: it starts at the container's left edge and is the full 600px wide, with the float painted over it. Make the body box occupy exactly the space beside the float — 400×160, starting at x=200 — as a consequence of the float being there, not as a number you measured off it. The float's width is going to change. The obvious answer draws the right picture and is the reason this problem exists.
Hint
A float shortens the LINE BOXES beside it, not the block that contains them. What kind of box refuses to overlap a float at all?
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="wrap"><div class="pic"></div><div class="body"></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; } .wrap { width: 600px; background: #16161d; } .pic { float: left; width: 200px; height: 120px; background: #7bdff2; } .body { height: 160px; background: #ff7ab6; }