flex-direction: column swaps which axis is which
The same two lines that centre a row centred nothing in a column — and justify-content: center moved the panels up and down instead of side to side.
Stack the three panels top to bottom in the order they appear in the markup, centre the stack vertically in the dock, and centre each panel horizontally. The panels are 200, 160 and 120 wide, so which one is where is not a detail — it is visible. Two properties do this, one per axis. Which property does which job is not a fact about the screen. It is a fact about the container.
Hint
Once the dock is a column, which direction is the main axis pointing — and which of the two properties is named after 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="dock"><div class="panel p1"></div><div class="panel p2"></div><div class="panel p3"></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: #0b0b0f; } .dock { width: 420px; height: 360px; background: #16161d; } .panel { height: 60px; background: #ffd166; } .p1 { width: 200px; } .p2 { width: 160px; background: #7bdff2; } .p3 { width: 120px; background: #b5e48c; }