Height of the div is changing in Safari

I have this website

Link

The problem is if you open the link in Safari the height of the Header on the right side becomes less than the left side and there is this small white line appearing bellow.

I tried to change the padding of the class

.top-header-right and .top-header-left 

but it will not help , because then in chrome its breaking . I also fixed the font-size of the top-header-left because I read in a link the font is rendered differently in different browser .but still no luck

Please help me out

HTML

   <div class="row">
<article class="top-header-left col-md-6 bg-black text-center">
<ul class="home-menu list-unstyled">
<li><a class="nav-work" href="dimensions.html">Work <i class="fa fa-angle-down"></i></a></li>
<li><a href="about.html">About</a></li> 
<li><a href="connect.html">Connect</a></li>
<li><a href="birdseyeview.html">Birds Eye-View</a></li>
</ul>
</article>
<article class="top-header-right col-md-6 bg-darkgray text-right">
<ul class="social-icons list-unstyled"> 

</article>
</div>

Thanks


Source: cross-browser

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.