Varying fonts of some html elements on dektop mode for different mobile and different browsers

Question

I have set a fixed font-size for the "p" and "h4" elements in my footer but I keep experiencing different font-size while using desktop mode on my mobile. I get the expected result while using firefox, and safari but a weird result while using chrome.

Here is the reference website, link to the website.

Attached below are images to visually illustrate the issue.

Here's the HTML

<div class="container-item details">
     <h2>travelaja</h2>
      <p class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisisleo, vel.
      </p>
</div>

<div class="container-item contact">
   <h3>Contact</h3>
   <h4>Address: Jl.Codelaras No.205A Kediri, Pare AG17</h4>
   ...
</div>

and this is the CSS I use to style it.

footer .container .container-item p.content {
  font-size: 1.6rem;
}

footer .container .contact h4 {
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 1.6rem;
}

I reduced the fonts to 1.0rem but it was not looking good on safari and then it was quite normal in chrome.

I also ensured that I have this meta tag,

<meta name="viewport" content="width=device-width, initial-scale=1.0" />