Wrapping my website skin around vBulletin messes up DHTML menus

[rgf207]

I wrapped my website skin around my vBulletin installation by editing my forum header and footer. Everything works OK except my DHTML menus are way off center. Below is the CSS for my forum skin

body {
    background: #FFF;
    font: normal 70%/1.5em Verdana, Tahoma, Verdana, sans-serif;
    color: #333; 
    
}




/********************************************
   LAYOUT
********************************************/ 
#wrap {
    width: 833px;
    background: url(/skins/Blog/images/bg.jpg) repeat-y center top;
    margin: 0 auto;
    text-align: left;
}
#content-wrap {
    position: relative;
    width: 91%;
    margin: 0 auto;
    padding: 0;    
}
/* header */
#header {
    position: relative;
    width: 833px;
    height: 100px;
    background: #FFF url(/skins/Blog/images/header.jpg) no-repeat center top;
    margin: 0; padding: 0;
    font-size: 14px;
    color: #FFF;
}
#header h1#logo {
    position: absolute;
    margin: 0; padding: 0;
    font: bold 42px 'Trebuchet MS', Arial, Sans-serif;
    letter-spacing: -2px;
    color: #FFF;
    text-transform: none;
    
    /* change the values of top and Left to adjust the position of the logo*/
    top: 19px; left: 53px;    
}
#header h2#slogan {
    position: absolute;
    z-index: 9999999;
    margin: 0; padding: 0;
    font: bold 12px 'Trebuchet MS', Arial, Sans-serif;
    text-transform: none;
    color: #FFF;
    
    /* change the values of top and Left to adjust the position of the slogan*/
    top: 65px; left:75px;            
}

/* menu */
#menu {
    clear: both;
    width: 833px;
    height: 26px;
    background: #FFF url/skins/Blog/images/menubg.jpg) repeat-y;
    margin: 0;
    font: bolder 12px/26px Tahoma, Verdana, Arial, Sans-Serif;            
}
#menu ul{
    margin: 0; padding: 0 0 0 35px;
}
#menu ul li {
    float: left;
    list-style: none;        
}
#menu ul li a {
    display: block;
    text-decoration: none;    
    padding: 0 10px;
    background: inherit;
    color: #FFF;
}
#menu ul li a:hover {
   background: #FFF; 
    color: #333;  
}
#menu ul li#current a {    
    background: #30899F; 
    color: #FFF;    
}

/* Main */
#main {
    width: 98%;
    padding: 0;    margin: 0;    
}

/* footer */
#footer {
    clear: both;
    color: #66737B;
    font: normal 90% Verdana, Tahoma, sans-serif;
    background: #FFF url(/skins/Blog/images/footerbg.jpg) no-repeat center top;    
    width: 833px;
    height: 60px;
    text-align: center;
    padding: 8px 0 0 0;
    margin: 0 auto;    
}
#footer a { text-decoration: none; }

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* additional classes */
.clear { clear: both; }
.gray { color: #CCC; }

attached is teh screenshot of how the DHTML menu looks. Any help would be appreciated
</style>