Align <HR> to right in IE/Edge

Question

Trying to align a handful of

<hr>

elements to the right on this page.
In IE/Edge, the

<hr>

elements align left in every case.

I am using

<hr class="hr-right">

.hr-right {

  text-align: right;

  margin-right: 0;

}

I have tried to use floats and clears, but I end up with the

<hr>

being displayed like a float image inside the paragraph.

Answer 1

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:

Sign up