em compounds; rem doesn't
Nested menus each get font-size: 0.8em, which is meant to make every sub-level slightly smaller than the top. By the third level the text is unreadable, and every level shrinks a different amount than the last.
Three nesting levels. Each bar is width: 5em; height: 1em, so its size is a direct readout of the font size at that level.
The design says: every nested level is 0.8 of the top level. Level one is 20px, so levels two and three are both 16px — bars of 100×20, 80×16, 80×16.
What you have is level two at 16px and level three at 12.8px, because 0.8em at level three is 0.8 of level two rather than 0.8 of the top. One more level and it would be 10.24px.
Fix it so the bars come out 100×20, 80×16, 80×16 — and keep it correct for a reader who has set their browser's default text size to something larger.
Hint
`0.8em` is 0.8 of something. On `font-size`, which element's font size is that — and is it the same element for `width: 5em` on the same box?
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="n1"><span class="dot d1"></span><div class="n2"><span class="dot d2"></span><div class="n3"><span class="dot d3"></span></div></div></div>
*, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-size: 20px; } body { background: #0b0b0f; color: #e8e8ef; font-family: system-ui, -apple-system, sans-serif; } .n1 { font-size: 1rem; } .dot { display: block; width: 5em; height: 1em; background: #ffd166; } .d2 { background: #b5e48c; } .d3 { background: #7bdff2; }