Teaching step

align-self works. justify-self does nothing.

MediumAlignmentF13

align-self: center on one item moved it. justify-self: flex-end on the item beside it did absolutely nothing — no warning, no error, no effect. The devtools even show the declaration, not struck through.

Three items in a 600px rail. - Back and Title stay packed against the left edge, touching. - Title sits on the rail's vertical centre line, and moving it must not move Back. - Save goes to the far right edge, and stays there when the rail changes width. The starter is the obvious attempt. Half of it works.

Hint

Look up `justify-self` and read the line marked *Applies to*. Then ask what would have to happen to the items either side of one, if a single item on the main axis really could move on its own?

Live preview1000×380

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="rail"><div class="item back"></div><div class="item title"></div><div class="item save"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; }
.rail { width: 600px; height: 200px; display: flex; background: #16161d; }
.item { flex: none; width: 80px; height: 60px; background: #7bdff2; }
.title { background: #ffd166; }
.save { background: #b5e48c; }