Build it

Spread the footer links from edge to edge

EasyDistributing space

Four footer links of four different lengths, huddled on the left of a 720px footer. They are supposed to span it, with the first and last flush against the edges.

Put the first link against the left edge of .footer, the last against the right, and split every bit of leftover space equally among the three gaps between them.

Hint

There are three gaps and one pool of leftover space. Which keyword divides one by the other and nothing else?

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.

<footer class="footer"><a class="flink f1"></a><a class="flink f2"></a><a class="flink f3"></a><a class="flink f4"></a></footer>

*, *::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; }
.footer { width: 720px; height: 56px; background: #16161d; display: flex; align-items: center; }
.flink { height: 20px; background: #2a2a36; }
.f1 { width: 80px; }
.f2 { width: 120px; }
.f3 { width: 96px; }
.f4 { width: 64px; }