ロゴがスライドしない（HTML、CSS、jQuery）

Question

jQueryを使用して、「サインイン」をクリックしたときにサインインボックスをスライドさせます。クリックすると、ロゴを含め、ページ全体がスライドします。これまでのところ、ページはロゴを除いてスライドします。あなたは、こちらのページを表示することができます：

http://mini.lukedude5.com

のいずれかで「サインイン」または「サインアップ」をクリックすると、ページの本文には、滑り落ちる（それを誇張し500pxなどに下部の余白を設定します）。しかし、あなたが見ることができるように、ロゴ「mi.ni」は下に滑りません。

<div id = 'header'> 
    <a href = '/' title = 'mi.ni' id = 'logo'>mi.ni</a> 
</div> 

上記はロゴのHTMLです。以下はCSSです。

#wrapper 
{ 
    width: 1000px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#wrapper #header 
{ 
    height: 100px; 
    width: 260px; 
    background: url('/styles/images/logo2.png') no-repeat; 
    margin: 20px auto 0px auto; 
} 

#wrapper #header #logo 
{ 
    height: 100px; 
    width: 260px; 
    display: block; 
    text-indent: -9999px; 
} 

ヘッダーはラッパーでラップされます。サインインボックスがスライドするバーは、ラッパーの内側にありません。

/アップボックス内の記号のためのCSSは次のとおりです。

#topBar #signIn, #signUp 
{ 
    width: 250px; 
    float: right; 
    color: #FFF; 
    margin-top: 5px; 
    font-weight: bold; 
    display: none; 
    margin-bottom: 500px; 
} 

この問題に関するすべてのヘルプは歓迎です！

EDIT：バーをスパニングするためのHTMLページのトップにあります。バーのための

<div id = 'topBarWrapper'> 
     <div id = 'topBar'> 
      <div id = 'mainTop'> 
       mi.ni is a URL shortening service. Learn more about mi.ni. I am trying my hardest to get the domain http://mi.ni. 
      </div> 
      <div id = 'rightTop'> 
       <span id = 'signInText'>Sign In</span> 
       | 
       <span id = 'signUpText'>Sign up</span> 
      </div> 
      <div id = 'signIn'> 
       <form action = '' method = 'POST'> 
        <table> 
         <tr> 
          <td>Username:</td> 
          <td><input type = 'text' name = 'username' id = 'usernameSignIn' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td>Password:</td> 
          <td><input type = 'password' name = 'password' id = 'passwordSignIn' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td><div class = 'signInSubmit'></div></td> 
         </tr> 
        </table> 
       </form> 
      </div> 
      <div id = 'signUp'> 
       <form action = '' method = 'POST'> 
        <table> 
         <tr> 
          <td>Username:</td> 
          <td><input type = 'text' name = 'username' id = 'usernameSignUp' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td>Email:</td> 
          <td><input type = 'text' name = 'email' id = 'emailSignUp' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td>Password:</td> 
          <td><input type = 'password' name = 'password' id = 'passwordSignUp' class = 'input' /></td> 
         </tr> 
         <tr> 
          <td></td> 
          <td><div class = 'signUpSubmit'></div></td> 
         </tr> 
        </table> 
       </form> 
      </div> 
     </div> 
    </div> 

CSSは：

#topBarWrapper 
{ 
    width: 100%; 
    height: 25px; 
    padding-top: 5px; 
    background: #000; 
    color: #FFF; 
} 

#topBar 
{ 
    width: 1050px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#topBar #mainTop 
{ 
    display: inline; 
} 

#topBar #rightTop 
{ 
    display: inline; 
    margin-left: 50px; 
    font-weight: bold; 
} 

#topBar #rightTop #signInText 
{ 
    cursor: pointer; 
    margin-right: 5px; 
} 

#topBar #rightTop #signUpText 
{ 
    cursor: pointer; 
    margin-left: 5px; 
} 

#topBar #signIn, #signUp 
{ 
    width: 250px; 
    float: right; 
    color: #FFF; 
    margin-top: 5px; 
    font-weight: bold; 
    display: none; 
    margin-bottom: 500px; 
} 

Answer 1

明確に設定します。両方のラッパーのdivに。そこにはいくつかの崩壊が続いていました。

#wrapper { 
width: 1000px; 
margin-left: auto; 
margin-right: auto; 
clear: both; 
}