Trying to align a handful of
<hr>
<hr>
<hr class="hr-right">
.hr-right {
text-align: right;
margin-right: 0;
}
<hr>
If you want elements to align-right in a flex container use:
margin-left: auto
not
margin-right: 0;
Flex auto margins work by consuming all available free space.
So margin-left: auto
will consume all space to the left of the item, pinning it to the right edge.
More details here: