Build it

Stop the avatar squashing next to a long name

EasySizing

A 56px round avatar renders as a 48px oval whenever the name beside it is long. The avatar has width: 56px set. It is being ignored.

Keep .avatar at exactly 56×56 in .media, and let .body give up the difference instead. It must hold its size when the row gets narrower still.

Hint

`width` sets a base size. What is allowed to take a base size away again?

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="media"><div class="avatar"></div><div class="body"></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; }
.media { width: 420px; height: 80px; background: #16161d; display: flex; align-items: center; gap: 12px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: #7cd4a0; }
.body { width: 420px; height: 56px; overflow: hidden; background: #2a2a36; }