菜單以相反的順序出現

Question

我一直在試圖爲我的網站使用基金會建立一個導航欄。但是，在我嘗試過之後，我的菜單欄中的項目現在以相反的順序出現。在右側，不是說「關於聯繫的投資組合」，而是說「關於投資組合的聯繫」。有任何想法嗎？

HTML：

<div id="header-container"> 
     <div id="header" class="row"> 
      <nav class="nav-bar"> 
       <ul class="left"> 
        <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li> 
       </ul> 
       <ul class="right"> 
        <li data-slide="2" class="portfolio"><a href="">portfolio</a></li> 
        <li data-slide="3" class="about"><a href="">about</a></li> 
        <li data-slide="4" class="contact"><a href="">contact</a></li> 
       </ul> 
      </nav> 
     </div><!--end header--> 
    </div><!--end header-container-->  

CSS：

div#header ul{ 
    height: 128px; 
    list-style-type: none; 
} 
div#header ul li { 
    background-color: #003264; 
    text-align: center; 
    height: 128px; 
    line-height: 128px;   
    transition: background-color 1s; 
    -webkit-transition: background-color 1s; 
    display: inline; 
    padding: 0; 
    margin: 0; 
} 
li.andrewgu { 
    width: 200px; 
    font-size: 60px; 
} 
li.portfolio { 
    float: right; 
    font-size: 30px; 
    width: 140px; 
} 
li.about { 
    float: right; 
    font-size: 30px; 
    width: 110px; 
} 
li.contact { 
    float: right; 
    font-size: 30px; 
    width: 130px; 
} 

網站：http://andrewgu12.kodingen.com/ 任何幫助，將不勝感激，謝謝！

Answer 1

cahnge float:right;到float:left

li.portfolio { 
    float: left; 
    font-size: 30px; 
    width: 140px; 
} 
li.about { 
    float: left; 
    font-size: 30px; 
    width: 110px; 
} 
li.contact { 
    float: left; 
    font-size: 30px; 
    width: 130px; 
} 

，並添加float:right到ul

div#header ul{float:right;}