::after property working for one <hr> but not a second

So while doing the portfolio project, I’m trying to use the hr::after property to put a Font Awesome symbol in the center of the < hr > much like sample. I have two < hr > so far within the scope, the first one aligns correctly, the second does not. Here’s how it looks:

< body >
< main >
< hr />
< hr />
< /main >
< /body >

the CSS for both of them are applied by a single:
main hr::after {


You can view the codepen here:https://codepen.io/Ayelwen/pen/KXwMZx
so far, I’m tinkering and playing with the position, display, and other properties to see what could be causing it.

I’ve been experimenting and researching for a day on this now so figured it was about time to ask. Thanks in advance for any advice.

Disregard. I went element by element comparing the two HRs and found the issue. The first was inheriting a text-align:center and the bottom was not. Fixed.