Build it

Reverse the wizard steps — and keep them on the left

EasyMain axis vs cross axis

flex-direction: row-reverse put the steps in the right order and threw the whole group across to the right-hand side of the bar. Nothing in the stylesheet asked for that.

Render the steps in reverse — .s3, .s2, .s1 from left to right — with the group still packed against the LEFT edge of .steps and the 8px gaps intact.

Hint

After the reversal, which physical edge is `flex-start`?

Live preview1000×700

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="steps"><div class="step s1"></div><div class="step s2"></div><div class="step s3"></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; }
.steps { width: 600px; height: 56px; background: #16161d; display: flex; align-items: center; gap: 8px; }
.step { width: 72px; height: 28px; background: #2a2a36; }
.s3 { background: #7cd4a0; }