element not displaying on mobile device; line height issues on mobile

I am having problems with my <hr> tags. Here is the page:
https://divorceattorneyalbany.com/albany-lawyer-staff/heather-brondi/

When I view it in on my laptop, the <hr> elements display perfectly (though, IE is showing one darker than the other…but…oh well). When I view the same page on my phone (Chrome browser on an Android Phone) there are no <hr> tags. I have my CSS as:

hr {
display: block;
margin-top: 0.4em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}

Frustratingly, this CSS was working just fine with my phone all this week. Last night the <hr> just stopped showing. Nothing updated on my phone and I haven’t changed a thing on my CSS. What am I doing wrong?

Also, I adjusted the line height of my <h1> and<h3> tags and they were displaying just fine across all devices. I just looked at them on my mobile and it’s all squished. Is there some CSS I should add to make the line height more mobile friendly?

here is the CSS for my <h1> and <h3> tags:
h1 {
font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;
line-height: .5;
}

h3 {
font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif;
line-height: .5;
}

Sorry for the 2 questions in one and thanks!