Safari浏览器HTML CSS的问题

Question

我刚遇到一个问题。我的Chrome浏览器显示的是这样的导航：

但是我的Safari显示如下：

代码：

#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;
}

找不到针对此的任何修复程序。有什么想法吗？

Answer 1

通过将display: inline-block;添加到nav a {}

来解决