Липкое меню слегка перемещается?

Question

У меня есть горизонтальное липкое меню, которое прилипает к верхней части страницы при прокрутке пользователя. У меня есть очень маленькая проблема, но просто раздражает.

При прокрутке страницы все меню перемещается вправо вправо на несколько пикселей. Я хочу, чтобы он вообще не двигался на этом сайте http://www.welcomewebstudios.com/.

Может кто-нибудь помочь

HTML

<div class="menu"> 
      <ul> 
       <li><a href="#">About Me</a></li> 
       <li><a href="#">My Work</a></li> 
       <li><a href="#">Experience</a></li> 
       <li><a href="#">Contact Me</a></li> 

      </ul> 

      </div> 

JQuery

$(document).ready(function(){ 

var menu = document.querySelector('.menu'); 
var origOffsetY = menu.offsetTop; 

function scroll() { 
    if ($(window).scrollTop() >= origOffsetY) { 
    $('.menu').addClass('sticky'); 
    $('.content').addClass('menu-padding'); 
    } else { 
    $('.menu').removeClass('sticky'); 
    $('.content').removeClass('menu-padding'); 
} 


} 

document.onscroll = scroll; 

}); 

CSS

* {font-family:arial; padding:0;} 
.menu { 
font:Verdana, Geneva, sans-serif; 
border-style:groove; 
border-width:1px; 
border-color:#333; 
background-color:#000; 
font-size:20px; 
height:50px; 
line-height:30px; 
width:100%; 
text-align:center; 
} 
.content {margin-top:10px;} 
.menu-padding {padding-top:40px;} 
.content p {margin-bottom:20px;} 
.sticky {position:fixed; top:0;} 
li{ display:inline-block; margin:0 0 0 50px;} 

Answer 1

добавить в .menu {} следующее:

position: fixed; 
top:0; 
left:0; 

, что должен это сделать, вот скрипку: http://jsfiddle.net/hbrunar/zXrNX/1/