menu bar shifts to the right when screen is minimized

My menu bar shifts right and out of alignment when you minimize your screen

https://www.thecockcrows.com

make window smaller than width of the blog to see it happen

here is the css code for the menu bar

#menu { color: #ffffff; font: bold 15px Helvetica, Arial, Verdana, Sans-Serif; background-image: url(“images/menu.jpg”); background-repeat: no-repeat; background-attachment: scroll; background-position: center top; text-align: center; margin: 0 auto; padding: 14px 25px 40px; width: 960px }
#menu h2 {
margin: 0;
padding: 5px 25px 12px 25px;
}
#menu li {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
#menu ul {
margin: 0;
padding: 0;
}
#menu ul li a {
color: #FFFFFF;
padding: 14px 25px 15px 25px;;
margin: 0;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li.current_page_item a { color: #221E42; text-decoration: none; background: transparent }