I encountered a strange issue with my website navigation. In Chrome, it appears like this:
https://i.sstatic.net/Y2pfF.png
However, in Safari, it looks like this:
https://i.sstatic.net/YhlDU.png
Here is the code I'm using:
#header{
display: grid;
width: 70%; margin: 0 auto;
margin-top: 1%;
grid-template-columns: repeat(2, 1fr);
grid-template-areas: 'header-left header-right';
text-align: center;
font-size: x-large;
font-weight: bold;
color: grey;
margin-top: 2em;
}
#header-left{
grid-area: 'header-left';
text-align: left;
color: white;
}
#header-right{
grid-area: 'header-right';
}
#header-right a {
text-decoration: none;
color: grey;
}
#about h2,p{
text-align: left;
}
I've been trying to fix this discrepancy to no avail. Any suggestions on what might be causing the problem?