Build it

Give every toolbar button an equal share of space around it

EasyDistributing space

Three buttons in a 660px bar. The brief says each one should own an equal slice of the bar and sit in the middle of its slice — which is not the same thing as equal gaps, and looks different.

Divide the free space in .bar equally among the three buttons, half of each button's share going on its left and half on its right. Measured as gaps that is 60px at each end and 120px between.

Hint

The share is per BUTTON, not per gap. If two buttons are next to each other, how many shares are between them?

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; }