Website looks different on Safari to Chrome (position css)

So on Chrome it looks perfect, but on safari it's really weird

CHROME

SAFARI

        #hft{
    position:relative;
    height:auto;
    top:4px;
    font-family:'New Font', Icons;
    padding: 0;
    margin: 0;
    color: #000;
    line-height: 0.02;
  text-align: justify;
  font-size: 15vw;
    font-style: normal;
      transition: all 0.1s ease;
    font-weight: 700;

}

<div id="hft" rel="home_page" style=" position:relative; border:0px !important;">NAME</div>
<div id="hft-under" style="position:relative; z-index:1001;">
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
    <div grid-col="x9" grid-pad="0"><div style="text-align: left"><h2><a href="#" rel="home_page">Home</a>, <a href="Information" rel="history">Information</a></h2></div></div>
    <div grid-col="x9" grid-pad="0"></div>
    <div grid-col="x9" grid-pad="0"></div>
    <div grid-col="x9" grid-pad="0"><div style="text-align: left"><div style="text-align: right"><h2> <a href="">Email</a>,<a href="" target="_blank"> Instagram︎︎︎</a></h2></div></div></div>
</div>
</div>

Can someone explain why this could be happening, position relative working on chrome but not safari?