Teaching step

The width that is being ignored

MediumSizingF19

width: 180px on one pane, width: 540px on the other, both in the stylesheet, neither struck through in devtools — and both panes render at 360px.

A 720px rail holding two panes. The base stylesheet gives them width: 180px and width: 540px, and the browser renders them 360 and 360. Make them actually 180 and 540, filling the rail. Nothing in the base stylesheet overrides those widths. Read it again and find the declaration that is beating them anyway.

Hint

Which properties in that stylesheet are statements about main-axis size? There are more of them than there are `width` declarations.

Live preview1100×300

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="rail"><div class="pane left"></div><div class="pane right"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.rail { width: 720px; height: 120px; padding: 24px 0; display: flex; background: #16161d; }
.pane { flex: 1; height: 72px; }
.left { width: 180px; background: #7bdff2; }
.right { width: 540px; background: #b5e48c; }