The centred box you cannot scroll to
A wide card centred in a narrow rail. It overflows by 200px on each side — and the left 200px cannot be reached. Not by scrollbar, not by wheel, not by keyboard. It is painted and it is gone.
A 600px card in a 400px rail. It does not fit, and it is not going to. Make the card sit flush against the rail's left edge when it overflows, so all of the spill is on the reachable side — and centred when the rail is wide enough to hold it. One declaration does both. The card must keep its 600px.
Hint
What would you call an alignment that gives up on itself rather than push content somewhere nobody can follow? The CSS keyword is the same word you just thought of.
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="rail"><div class="card"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; } .rail { width: 400px; height: 180px; background: #16161d; display: flex; align-items: center; } .card { flex: none; width: 600px; height: 72px; background: #ffd166; }