Ответственный заголовок со странной ошибкой веб-кита

Question

В настоящее время я создаю новый веб-сайт, но в браузерах веб-кит есть небольшая икота.

http://typework.github.io/green-life/

Если вы посмотрите на URL выше и размер браузера для мобильного размера. Откройте навигацию (нажмите только один раз на гамбургере) и измените размер в полноэкранном режиме. Вы можете видеть, что моя навигация движется влево. Когда вы изменяете размер браузера, вы видите, что он перемещается все больше и больше влево.

В Firefox У меня нет этой проблемы, Safari и Chrome.

Я использовал простой и простой JavaScript:

$('.menu-link').on('click', function() { 
    $('.nav').toggleClass('active'); 
    return false; 
}); 

и простой дисплей: блок CSS:

.nav { 
    display: inline-block; 
    float: right; 
    padding: 31px 0 0 0; 
    margin: 0; 
} 
@media(max-width: 992px) { 
    .nav { 
     position: relative; 
     margin: 0; 
     padding: 0; 
     display: none; 
     clear: both; 
     width: 100 %; 
    } 
    .nav.active { 
     display: block; 
    } 

Я, кажется, не найти ошибку, однако. Есть идеи?

Answer 1

Я думаю, что есть проблема в nav li, изменить его display:inline-block.

.nav li { 
    display: inline-block; 
    padding-left: 30px; 
    text-align: right; 
} 

Я думаю, что это решит проблему.

также делают display block медиа запрос