html - css list drop down menu bar moves when I zoom and resize browser window -

i created drop down menu bar in lists , css , anytime zoom in/out or adjust browser window size contents on bar shift left when zoom out , right when zoom in. also, when adjust browser window size navigational bar doesn't move rest of page left. if opens new browser window , it's smaller full screen, contents in navigation bar in wrong place (too far left or right). know how can fix this? thank in advance. did research previous questions similar mine seems time try solutions don't work me.

here's link menu bar i've created. http://www.stlpublicradio.org/info/press-test.php#

<code><div id="wrapper"> <ul id="nav">  <li>  <a href="#">main menu 1</a>            <ul>                 <li><a href="#">1</a></li>                 <li><a href="#">2</a></li>                 <li><a href="#">3</a></li>                 <li><a href="#">4</a></li>                 <li><a href="#">5</a></li>                 <li><a href="#">6</a></li>            </ul>  </li>   <li>         <a href="#">main menu 2</a>         <ul>                 <li><a href="#">1</a></li>                 <li><a href="#">2</a></li>                 <li><a href="#">3</a></li>                 <li><a href="#">4</a></li>                 <li><a href="#">5/a></li>                 <li><a href="#">6</a></li>                 <li><a href="#">7</a></li>                 <li><a href="#">8</a></li>         </ul> </li>  <li>         <a href="#">main menu 3</a>             <ul>                 <li><a href="#">1</a></li>                 <li><a href="#">2</a></li>                 <li><a href="#">3</a></li>             </ul>  </li>  <li>         <a href="#">main menu 4</a>             <ul>                 <li><a href="#">1</a></li>                 <li><a href="#">2</a></li>                 <li><a href="#">3</a></li>                 <li><a href="#">4</a></li>                 <li><a href="#">5</a></li>             </ul> </li>     </ul> </div>  </code>  <code> css #wrapper { width: 100%;  }  #nav{      background: #383838; /* old browsers */     background: -moz-linear-gradient(top,  #383838 21%, #131313 100%); /* ff3.6+ */     background: -webkit-gradient(linear, left top, left bottom,      color-stop(21%,#383838),   color-stop(100%,#131313)); /* chrome,safari4+ */     background: -webkit-linear-gradient(top,  #383838 21%,#131313 100%); /* chrome10+,safari5.1+ */     background: -o-linear-gradient(top,  #383838 21%,#131313 100%); /* opera 11.10+ */     background: -ms-linear-gradient(top,  #383838 21%,#131313 100%); /* ie10+ */     background: linear-gradient(to bottom,  #383838 21%,#131313 100%); /* w3c */     list-style:none;     font-weight:bold;     float:left;     width:100%;     font-family: arial, helvetica, sans-serif;     list-style: none;     position:relative;     z-index:100;     font-size: 100%;     height: 40px;     display:inline-block;     margin: 0 auto;     white-space:nowrap;     padding-left:500px;     text-align:center; }  #nav li a{     border-left: thin;     border-left-style:solid;     border-left-width:thin;     border-left-color:#cccccc;     line-height: 30px;     padding-left: 5px;     width: 100%;     }  #nav li{     position: absolute;     display:block;     padding-top:0px;     margin-top:0;     float:left;     margin-right:10px;     position:relative;     color: #99cccc; }   #nav a{     font-size: 14px;     margin:0;     display:block;     padding:5px;     color:#fff;     text-decoration:none; }  #nav a:hover{     margin-top:0;     text-decoration:none;     color:#fff; }   /*dropdown start*/ #nav ul{     height: 400px;     background:#fff;     background:rgba(255,255,255,0);          list-style:none;     position:absolute;     left:-9999px;     padding-left: 275px;     padding-top:0px;     display:block;     width: 190px;     /*display:block;     color: #cccccc;     font-family: helvetica, arial;     font: bold;     margin: 0;     text-align: left;*/ }  #nav ul li{     text-align:left;     float:none;     margin-left: 275px;     padding-left: 0px;     display: block;     background-color: #333;     font-family: arial, helvetica, sans-serif;     display: inline;     list-style: none;     margin: 0; }  #nav li img {     padding-left: 3px; }  #nav ul a{     font-size: 12px;     background-color:#333;     white-space:nowrap;  }  #nav li ul li {        margin-top: 0px;     padding-top: 5px; }  #nav li {     color: #cccccc; }  #nav li:hover ul{      left:0;     display: block;     left:-275px; }  #nav li:hover a{     text-decoration:none; }  #nav li:hover ul a{      text-decoration:none; }  #nav li:hover ul li a:hover{     background:#333; }     </code>     

in nav have padding-left: 500px;, that's lot of padding , cause issues on smaller screens , browser resizing.