Float Right Inside A CSS-Table Cell

Question

У меня вопрос относительно макета, который я делаю. Я хочу сделать простое горизонтальное меню навигации, и я начинаю с этим: https://jsfiddle.net/74596pc8/

Однако, когда я пытаюсь плавать меню внутри 2 столбца справа на полях первого получить все перепутались, как это: https://jsfiddle.net/33pf48u2/2/

HTML:

<div class="top-bar"> 


     <div class="grid"> 

      <div class="row"> 

       <div class="col3"> 
        LOGO 
       </div> 

       <div class="col9"> 
        <nav class="right" style="height:55px;"> 
         <div class="menu"><ul><li class="page_item page-item-2"><a href="http://127.0.0.1/sample-page/">Sample Page</a></li></ul></div> 
        </nav> 
       </div> 

      </div> 

     </div>  

    </div> 

    <div class="home-bar"> 

     <div class="grid"> 
      <div class="row"> 
      </div> 

     </div> 

    </div> 

    <div class="home-posts"> 

     <div class="grid"> 

     </div> 

    </div> 

Сетка:

.grid { 
    margin:0 auto; 
    max-width: 1200px;} 

@media (min-width: 600px) { 
    .row { 
    display: table-row; 
    width: 100%; 
    table-layout: fixed; } 

    .col { 
    display: table-cell; } 

/* .row-padded { 
    margin-left: -1rem; 
    margin-right: -1rem; } 

    .row-padded .row { 
    border-spacing: 1rem 0; } } */ 

@media (min-width: 600px) { 
    .col1 { 
    display: table-cell; 
    width: 8.333333%; } 
.... 

Прикладная CSS:

/* Nav Menu 
---------------------------------------*/ 
html ul,li{ 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: inline-block; 
} 
.right{ 
float:right; 
} 

Просьба сообщить о том, почему это и как исправить это :)

спасибо заранее.

Answer 1

Вместо использования float right вы можете использовать свойство text align: right, это даст вам тот же результат.

.right { 
    text-align: right; 
}