Build it

Centre the brand mark in the masthead

EasyAlignment

The logo was supposed to sit in the middle of the header. It is jammed against the left edge, and nudging it with a margin means re-measuring it every time the header changes width.

Put .brand in the horizontal middle of .masthead, and leave it exactly where it is vertically — flush with the top of the bar. It must stay centred at any header width.

Hint

Which of flexbox's two alignment properties belongs to the axis the items are laid out along?

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.

<header class="masthead"><div class="brand"></div></header>

*, *::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; }
.masthead { width: 720px; height: 72px; background: #16161d; }
.brand { width: 160px; height: 32px; background: #7cd4a0; }