难以理解这个CSS定位结果

Question

JSFiddle链接：https://jsfiddle.net/jm5b5p9L/1/

CSS：

header {
    background-color: #323d51;
    height: 600px;
}
li {
    display: inline-block;
    border: 5px solid mistyrose;
    height: 100px;
    width: 100px;
}
.logo {
    background-color: grey;
    height: 100px;
    width: 100px;
}
.userlink {
    color: white;
    border: 2px solid goldenrod;
}

所以，我无法理解为什么在第一个“行”上，可以这么说，我的两个内联块没有彼此对齐，但在底部的两行中，没有问题。这似乎是因为孩子的元素不同，但我不知道为什么这会很重要。

任何人都可以解释为什么会这样，以及我可以做些什么来解决它？