Несогласованный nav в WordPress

Question

Так что у меня очень странная проблема в WordPress.

При начальной загрузке домашней страницы макет по желанию. Разнесенные элементы li с некоторым дополнением. Однако это некорректно ...

Если я перехожу на другую страницу в заголовке, расположение с элементами li отличается. Никаких прокладок, все скручивалось вместе. Однако! Затем, если я обновляю страницу, элементы снова желательны.

Перейдите на главную страницу, и они снова сломаны. Обновите и вуаля, они в порядке. Я вообще не понимаю эту несогласованность.

Я предполагаю, что это как-то связано с заполнением, не перекрывающимся сначала, а затем каким-то образом перекрывающимся.

Вот 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> 

Вот 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; 
} 

Вот копия проблемы с JSFiddle:

https://jsfiddle.net/4z1yz3g0/

Я добавил границы, чтобы увидеть перекрытие перекрытия более четко, но я не могу понять, почему.

Благодарим за любую помощь заранее.

Answer 1

Попробуйте использовать вместо точек%

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

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

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

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

Имеет много лучший результат ИМ