The text I added to a website appears perfectly aligned on Chrome and Explorer, but on Safari, it's positioned below the logo. How can I resolve this issue without affecting the view in other browsers?
The desired layout should show as "LOGO | TEXT," but Safari displays it differently. https://i.sstatic.net/ATQjZ.png
Below is the code I used:
body {
background-color: #333333;
}
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<i class="fa fa-navicon fa-lg"></i>
</button>
<a class="navbar-brand" style="position:relative; right:20%;" target="_blank" href="https://www.cirad.fr/">CIRAD</a>
<span class="navbar-pipe"> | </span>
<a style="position:relative;right:15%;text-decoration:none;color:white;font-size:36px;top:5px;" href="{% url " home " %}">AWARE</a>
</div>
Additionally, how can I adjust the bottom margin of the site to avoid overlapping with a fixed footer? Changing the margin did not seem to have any effect.