How to nicely overlap images in your avatar list

When creating horizontal lists with avatars, you want the first avatar to be on top of the second one, and so on.

But by default, if you add a negative margin to the second image, it will go on top, because it's further down in your code.

To fix this, you'll just have to reverse your list!
And it's super easy with flexbox.

img {
    border-radius: 50%;
    border: 3px solid white;
}

ul {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

li {
    margin-right: -1.5em;
    z-index: 1;
}

See an example on CodePen.