The whitespace between inline-block elements
Three tiles that should be flush have gaps between them. No margin, no padding, no gap property anywhere. Putting the three tags on one line in the HTML fixed it, which cannot possibly be how CSS works.
Three inline-block tiles that are supposed to sit flush against each other. There are gaps between them, and there is nothing in the stylesheet that could be making one.
Close the gaps: the tiles must touch, starting at the row's left edge, and the row must be exactly as tall as a tile.
The markup is indented across four lines, and you cannot change it. That constraint is the entire problem — the layout currently depends on how the HTML was formatted.
Hint
What is between the two tags in the source, and what does an inline formatting context do with it?
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"> <span class="tile t1"></span> <span class="tile t2"></span> <span class="tile t3"></span> </div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; color: #e8e8ef; font-family: system-ui, -apple-system, sans-serif; } .row { width: 600px; font-family: monospace; font-size: 20px; background: #2a2a36; } .tile { display: inline-block; width: 80px; height: 40px; background: #ffd166; } .t2 { background: #b5e48c; } .t3 { background: #7bdff2; }