Custom Horizontal Ruler Styling with 50% width and icon shows wrong because of CSS.
margin-left: 10px; and margin-right: 10px; on hr-inner shall be moved from .hr-inner to .av-seperator-icon
To make it works correctly i add “Horizontal Ruler Styling” new class newhr and have this quick CSS fix:
.newhr .hr-inner { margin: 0!important; width: 49%!important;}
.newhr .av-seperator-icon { margin-left: 1%!important; margin-right: 1%!important; }
CSS for mobile: (on mobile you can see the icon is not in the center if not used CSS for mobile)
.newhr .hr-inner { margin: 0!important; width: 46%!important;}
.newhr .av-seperator-icon { margin-left: 2%!important; margin-right: 2%!important; }
Correct way to find the widh of hr-inner on both side is: (screen width – (icon width + margin left + margin right)) / 2
Maybe new version will have this fixed.