ナビゲーションバーHTML＆CSS

Question

私は、ナビゲーションバーに取り組んだし、それは現在、次のようになります。

今私はテキストが右に浮かぶことをしたいです。赤いスペースが左側にあるように。しようとした場合でも、「フロート：右を」、それは次のようになります。赤の背景が消え

。私は余分なdiv（columnsection）を使用しましたが、最良のケースでは私はそれを取り除きたいと思っています。誰かが私を助けてくれることを願っている

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#navbar { 
 
    margin: auto; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
#navbar ul li { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    margin: 0px; 
 
} 
 

 
#navbar ul { 
 
    float: right; 
 
}

<div id="navbar"> 
 
    <div id="columnsection"> 
 
    <ul> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
    </ul> 
 
    </div>

Answer 1

代わりのfloat:right使用text-align:right

* { 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
#navbar { 
 
    margin: auto; 
 
    width: 100%; 
 
    max-width: 1200px; 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
#navbar ul li { 
 
    display: inline-block; 
 
    background-color: blue; 
 
    margin: 0px; 
 
} 
 

 
#navbar ul { 
 
    text-align: right; 
 
}

<div id="navbar"> 
 
    <div id="columnsection"> 
 
    <ul> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
     <li> Lorem </li> 
 
    </ul> 
 
    </div> 
 
</div>

[の