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

Put exactly 24px between the nav links

EasyGap

The nav links are touching. A right margin on every link spaced them out and pushed the whole group 24px clear of the right-hand edge it is supposed to sit against — because the last link got one too.

The nav is right-aligned. Put exactly 24px between each pair of links in .nav, with the last link still flush against the right-hand edge and no space after it.

Hint

A margin belongs to an element and travels with it. What would a property belonging to the space BETWEEN elements do differently at the end of the row?

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.

<nav class="nav"><a class="link"></a><a class="link"></a><a class="link"></a><a class="link"></a></nav>
*, *::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; }
.nav { width: 520px; height: 56px; background: #16161d; display: flex; align-items: center; justify-content: flex-end; }
.link { width: 88px; height: 24px; background: #2a2a36; }