導航欄在小屏幕上失去對齊

我在我的網站上實現了twitter引導。我想知道如何使導航欄響應像twitter bootstrap official site上的那樣。小尺寸屏幕對齊有問題請看下面的圖片。導航欄在小屏幕上失去對齊

HTML代碼：

<div class="navbar-wrapper"> 
     <div class="container"> 

     <div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="index.php">Studyfoyer</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="learn.php">Learn</a></li> 
       <li><a href="teach.php">Teach</a></li> 
       <li><a href="forum.php">Discuss</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 

        <li><a href="contact.php">Contact Us</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Contribute</a></li> 

        </ul> 
       </li> 
       </ul> 
      </div> 
      </div> 
     </div> 

     </div> 
    </div>

自定義CSS：

.nav{ 
    float:right; 
} 
/* Special class on .container surrounding .navbar, used for positioning it into place. */ 
.navbar-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    z-index: 20; 
} 

/* Flip around the padding for proper display in narrow viewports */ 
.navbar-wrapper .container { 
    padding-left: 0; 
    padding-right: 0; 
} 
.navbar-wrapper .navbar { 
    padding-left: 15px; 
    padding-right: 15px; 
}

FYI與尺寸 Problem with alignment in small screen my_Site