Build it

Centre the card shelf and keep a 16px gutter

EasyGap

Three cards need a fixed 16px gutter AND the group needs to be centred. Every distribution keyword that centred them also decided the gutter for itself.

Put exactly 16px between the cards in .shelf, and centre the resulting group horizontally with the leftover split equally at the two ends.

Hint

Do these two requests compete for the same space, or does one of them happen first?

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="shelf"><div class="card"></div><div class="card"></div><div class="card"></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; }
.shelf { width: 700px; height: 200px; background: #16161d; display: flex; align-items: center; }
.card { width: 160px; height: 120px; background: #2a2a36; }