wtf(css)layout you can see happening
← wtf(css)
Build it

The same bar, and now every gap has to be the same size

EasyDistributing space

Same three buttons, same 660px bar, and the design review said the gap at the ends looks half the size of the gaps in the middle. It is exactly half the size.

Space the three buttons in .bar so that all FOUR gaps are equal — before the first, between each pair, and after the last. That is 90px, four times.

Hint

Three items make four gaps. What number does the free space have to be divided by?

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="bar"><div class="b"></div><div class="b"></div><div class="b"></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; }
.bar { width: 660px; height: 64px; background: #16161d; display: flex; align-items: center; }
.b { width: 100px; height: 36px; background: #2a2a36; }