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; }