메뉴가 역순으로 나타납니다.

Question

저는 Foundation을 사용하여 웹 사이트의 navbar를 구축하려고했습니다. 그러나, 내 메뉴 표시 줄의 항목을 시도한 후에 역순으로 나타납니다. 오른쪽에, "포트폴리오에 관한 포트폴리오"라기보다는 "포트폴리오에 대한 연락"이라고 적혀 있습니다. 어떤 아이디어?

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:rightul에

div#header ul{float:right;} 

를 추가