菜单放错了

Question

这是我的标题应该是什么样的：

以下是有时候的样子：

正如您所看到的，右边的菜单有时会出错，是否有人知道如何解决这个问题？

有时我的意思是当我用F5或CTRL + F5刷新页面时。

以下是我的代码：

HTML：

<div id="navigation">
    <div class="content_navigation">
        <a href="index.php"><img src="img/logo.png" style="margin-top: 15px;" /></a>
        <a href="register.php"><div class="main-menu">Register</div></a>
        <a href="login.php"><div class="main-menu">Login</div></a>
    </div>
</div>

CSS：

.content_navigation {
    width: 960px;
    height: 60px;
    margin:0px auto;
    color: black;
}

#navigation{
    height: 60px;
    width: 100%;
    background-color: #232323;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    font-size: 20px;
}

.main-menu {
    min-width: 20px;
    padding: 5px 0 5px 20px;
    margin: 15px 0 0 0;
    color: #999999;
    font-size: 14px;
    float: right;
}
.main-menu:hover {
    color: white;
}

Answer 1

将您的CSS更改为

   .content_navigation {
    width: 100%;
    height: 60px;
     margin:0px auto;
    float:left;

}

#navigation{
    height: 60px;
    width: 100%;
    background-color: #232323;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    font-size: 20px;
    position:relative;
     float:left;

}

.main-menu {



    color:Red;
    font-size: 14px;
   float:right;
 position:relative;
   padding: 5px 0 5px 20px;
    margin: 15px 0 0 0;



}
.main-menu:hover {
    color: white;
    cursor:pointer

}

WORKING DEMO