Inconsistent nav in WordPress

So I've got a really strange issue in WordPress.

On initial load of the home page the layout is as desired. Spaced li elements with some padding. However, this is inconsistent somehow...

If I navigate to another page in the header the layout with the li elements is different. No padding, all scrunched together. However! Then if I refresh the page the elements are as desired again.

Navigate back to the home page and they are again broken. Refresh and voila they are fine. I do not understand this inconsistency at all.

The I imagine it's something to do with the padding not overlapping at first but then somehow becoming overlapped.

Here is the HTML:

<nav>
<div>
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">about</a>
        </li>
        <li><a href="#">Balls</a>
        </li>
        <li><a href="#">what</a>
        </li>
    </ul>
</div>

Here is the CSS:

nav {
padding: 2% 2% 0 2%;
background-color: #7DCBE2;
}

nav>div {
margin-left: 20%;
display: inline-block;
text-align: center;
}

nav li {
display: inline-block;
margin: 5px;
}

nav li a {
padding: 0 20%;
color: white;
text-decoration: none;
font-size: 20px;
border: 1px solid black;
}

Here is the a copy of the problem with JSFiddle:

http://ift.tt/1HcgFq1

I added borders to see the padding overlap more clearly but I can't figure out why.

Thanks for any help in advance.