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

Pin both team badges to the edges and centre the clock

EasyDistributing space

A scoreboard: home badge left, away badge right, match clock dead centre. Centring the clock pushed the badges inward; pinning the badges left the clock off centre.

Put .team:first-child flush with the left edge of .score, .team:last-child flush with the right, and .clock exactly in the middle of the row.

Hint

Three items, two pools of free space. Do they have to be the same size, and here, are they?

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="score"><div class="team"></div><div class="clock"></div><div class="team"></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; }
.score { width: 640px; height: 80px; background: #16161d; display: flex; align-items: center; }
.team { width: 120px; height: 40px; background: #2a2a36; }
.clock { width: 100px; height: 48px; background: #ffd166; }