列出元素合并在一起？

Question

我的标题中有一个导航栏，当页面加载时，元素合并在一起

它应该是什么样的： 我不明白为什么。它不会发生在IE或Firefox中，只有chrome。

关于标题的CSS：

#header {
    position: fixed;
    width: 100%;
    height: 7.5%;
    top: 0;
    left: 0;
    background-color: #708090;
}
#headerTitle {
    color: #FFFFFF;
    margin-left: 1%;
    height: 100%;
    display: table;
}
#headerTitleText {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
}
#headerList {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
}
.headerListButton {
    display: inline-block;
    float: left;
    height: 100%;
}
.headerListText {
    height: 100%;
    padding-left: 20%;
    padding-right: 20%;
    text-decoration: none;
    color: #FFFFFF;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    font-weight: bold;
}
.headerListButton:hover {
    background-color: #616F7E;
}    
#current {
    background-color: #616F7E;
    cursor: default;
    pointer-events: none;
}

关于标题的所有HTML：

<div id="header">
        <div id="headerTitle">
            <h1 id="headerTitleText">WIP</h1>
        </div>
        <ul id="headerList">
            <li class="headerListButton"><a href="index.php" class="headerListText">Home</a></li>
            <li class="headerListButton" id="current"><a href="about.html" class="headerListText">About</a></li>
            <li class="headerListButton"><a href="archives.html" class="headerListText">Archives</a></li>
        </ul>
    </div>

是铬错误吗？刷新后它会得到修复，只有在首次加载页面时才会发生。也许我应该使用javascript在加载时自动刷新页面（但是它如何知道它是否已经刷新了？）