Difficulty understanding this CSS Positioning result

Question

JSFiddle link: 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;
}

So, I am having trouble understanding why on the first "row", so to speak, my two li inline-blocks are not aligned with one another, but in the bottom two rows, there is no issue. It seems like it is because the child elements are different, but I don't know why that would matter.

Can anyone explain why this is happening and what I can do to resolve it?