按下链接然后返回按钮时a / li元素重叠

Question

我有一个导航栏，起初有问题，如果我调整页面大小，a / li元素会重叠。我用display来固定它：li中的inline-block但是现在在Chrome上，如果我按下其中一个链接然后按下后退按钮，a / li元素再次重叠在边缘。我已经尝试了一些行高，填充，边距，位置，但到目前为止没有做任何事情，除了添加更多我不想要的黑色背景。

<section>
    <ul class= "navbar">
        <li><a class="linkstyle" href=home.com>HOME</a></li>
        <li><a class="linkstyle" href=manga.com>MANGA</a></li>
        <li><a class="linkstyle" href=anime.com>ANIME</a></li>
        <li><a class="linkstyle" href=characters.com>CHARACTERS</a></li>
        <li><a class="linkstyle" href=kissanime.ru>WATCH</a></li>
     </ul>
 </section>

CSS：

ul.navbar{
    width: 90%;
    text-align: center;
    font-family: 'bleach', Calibri;
    font-size: 35px;
    padding: 20px;
}
li{
    display: inline-block;
    padding-top: 10px;
    line-height: 50px;
}
a:link {
    color: royalblue;
    text-decoration: none;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    background-color: black;
    border: 3px solid white;
    box-shadow: 5px 5px 15px black;
    padding-left: 10px;
    padding-right: 15px;
    display: inline-block;
}
a:visited {
    display: inline-block;
}