Build it

Centre the unread count inside its pill

EasyAlignment

The notification pill has a number in it and the number is sitting on the floor of the pill, slightly left. Bumping the line-height fixed it for '12' and broke it for '9'.

Centre .count inside .pill on both axes, using flexbox. It has to stay centred when the pill grows for a three-digit count.

Hint

The thing being centred is a box, not a string. What is that box's size, and who decides where it sits?

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="pill"><span class="count">12</span></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; }
.pill { width: 88px; height: 36px; margin: 40px; border-radius: 18px; background: #ff7ab6; color: #0b0b0f; font: 600 14px/1 system-ui, -apple-system, sans-serif; }
.count { height: 20px; }