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

Move the whole dialog button row to the trailing edge

EasyDistributing space

Delete, Cancel and Save are correctly spaced and sitting in the bottom-LEFT of the dialog, which is where nobody's eye goes looking for them.

Move all three buttons in .actions to the right-hand end as a group, keeping the 12px gap between them.

Hint

Nothing about the group changes — only where the group sits. Which end of the main axis is that?

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="actions"><div class="btn"></div><div class="btn"></div><div class="btn"></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; }
.actions { width: 520px; height: 64px; background: #16161d; display: flex; align-items: center; gap: 12px; }
.btn { width: 96px; height: 36px; background: #2a2a36; }