I have big problem with css templete

I'm not beginner in this but it's looks like that I'm not that smart to make page right

I konw where is a problem but I don't have any clue who to fix problem ...

here it is my problem :

http://seasonal-wallpapers.mwweb.info/

You see that right menu where ads .... actually it's down in center of page LOL

How to fix that ... ?????

Problem is when i add this on page :

<div id="wrapper">
<div class="extra-nav">
<h2>All Stories</h2>
<ul>
<li><a href="recent-stories.html">Recent Stories</a></li>
<li class="active"><span>Popular Stories</span></li>
</ul>
<br />

</div>

Code (markup):

This make that big mess in template

css code of this is

}
/***** tabbed navigation *****/

#sub-nav, .extra-nav {
    background: url(starword_files/tab-line.gif) bottom repeat-x;
    float: left;
    width: 540;
} /*IE6*/

#sub-nav {
    margin-bottom: 1.5em;
    font-size: 125%;
    font-weight: bold;
}

#sub-nav br, .boxed br, .extra-nav br, #searchform br {
    clear: both;
}

#sub-nav h2, .extra-nav h2, .extra-nav h3 {
    background: none;
    min-height: 15px;
    margin-bottom: 0;
}

.extra-nav h2, .extra-nav h3 {
    float: left;
    line-height: 1.1;
    position: relative;
    top: 15px;
    font-size: 130%;
}

.extra-nav h6 {
    padding-top: 0.3em;
}

#sub-nav ul, .extra-nav ul {
    margin: 0.5em 0 0 0;
    padding: 0 0 0 1em;
    list-style: none;
    font-size: 85%;
}

.extra-nav ul {
    padding-top: 2px;
}

#sub-nav li, .extra-nav li {
    margin: 0 1px 0 0;
    padding: 0 5px 0 0;
    background: url(starword_files/tab-back.png) 100% -100px;
    float: left;
    border-bottom: 1px solid #bbb;
    text-align: center;
}

.extra-nav {
    padding-right: 5px;
}

.extra-nav li {
    float: right;
}

.extra-nav h2 {
    float: left;
    border: none;
}

#sub-nav li.active, .extra-nav li.active {
    border-bottom: 1px solid #fff;
    background: url(starword_files/tab-back.png) 100% 0;
}

#sub-nav li a, #sub-nav li a:visited, #sub-nav li span, .extra-nav li a, .extra-nav li a:visited, .extra-nav li span {
    display: block;
    float: left;
    padding: 5px 11px 5px 16px;
    text-align: center;
    white-space: nowrap;
    background: url(starword_files/tab-back.png) 0 -100px;
    text-decoration: none;
    min-height: 17px; /* fixes FX/Mac issue */
    color: #666;
}
#sub-nav li.active a, #sub-nav li.active span, .extra-nav li.active a, .extra-nav li.active span {
    background: url(starword_files/tab-back.png) 0 0; 
} /*IE6*/
#sub-nav li:hover, .extra-nav li:hover {
    background-position: 100% -200px;
}

#sub-nav li:hover a, .extra-nav li:hover a {
    background-position: 0 -200px;
}

#sub-nav li.active:hover, .extra-nav li.active:hover {
    background-position: 100% 0;
}

#sub-nav li.active:hover a, .extra-nav li.active:hover a {
    background-position: 0 0;
    text-decoration: underline;
}

.extra-nav li a, .extra-nav li span {
    font-size: 125%;
    font-weight: bold;
    color: #666;
    letter-spacing: -0.02em;

}

Code (markup):

need serous help

thanks