Float Right Inside Eine CSS-Tabelle Cell

Question

Ich habe eine Frage zu einem Layout, das ich mache. Ich möchte ein einfaches horizontales Navigationsmenü erstellen und ich beginne damit:

Wenn ich jedoch versuche, das Menü innerhalb der 2 Spalte nach rechts zu schweben, werden die Ränder der ersten durcheinander gebracht, wie folgt aus: 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:

.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%; } 
.... 

Die Angewandte CSS:

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

Bitte geben Sie an, warum das ist und wie es

Dank im Voraus zu beheben :).

Answer 1

Anstatt float right zu verwenden, können Sie text align: right property verwenden, damit erhalten Sie das gleiche Ergebnis.

.right { 
    text-align: right; 
}