How to push a flex container to the right side?

Question

css

Good day! Here is such a menu:

All menu items are li in ul, that is, a list. Here is the CSS:

.header-menu
  width: 100%
  display: flex
  margin: 0
  & > li
    display: flex
    justify-content: center
    flex-direction: column
    margin-right: 15px
    margin-left: 15px
    position: relative

Each li is also a flex container (if I understand correctly). I need to do for the last two so to speak float: right. But I can't figure out how to do it. ul is stretched to its full width, that is, there is enough space to move them. I tried different justify and align but something doesn't work :(
Tell me how to implement it correctly. Thanks in advance!

Answer 1

Banal margin-left: auto works wonders. Hello tricky points from the spec :)
Here is your solution:
https://jsfiddle.net/a0hz7hp1/3/

Answer 2

First, it's not css, it's scss.
Secondly, take the already compiled css and see what styles you have applied to what.