ロゴとnavbarとロゴを完全に整列する方法

Question

多くの研究をした後、私はどのように私のWebアプリケーションのロゴとnavアイテムを整列させることができなかったのか分かりませんでした。私はロゴイメージを作成しましたが、正しい方法で配置することはできません！ うまくいけばあなたの何人かが私を助けてくれるはずです。ここで

はHAMLコード

ここ

%header 
    .header_inner 
    = link_to image_tag('loo.png'), root_path, id: "logo" 
    %nav 
     - if user_signed_in? 
      = link_to "New Note", new_note_path 
      = link_to "Sign Out", destroy_user_session_path, method: :delete 
     - else 
      = link_to "Log In", new_user_session_path 

サスコード

header { 
background: $dark_gray; 
position: fixed; 
top: 0; 
width: 100%; 
padding: 1.75rem 0; 
border-bottom: 7px solid $green; 
.header_inner { 
    width: 90%; 
    margin: 0 auto; 
    #logo { 
     float: left; 
     padding: 1px 0; 
    } 
    nav { 
     display: inline-block; 
     width: 10px; 
     float: left; 
     a { 
      text-decoration: none; 
      color: white; 
      font-size: 1.1rem; 
      line-height: 1.5; 
      margin-left: 1rem; 
      &:hover { 
       color: $green; 
      } 
     } 
    } 
} 

とあなたの Navbar Styling Result - Application Image

Answer 1

B'cozスタイリングナビゲーションバーの結果はのようないくつかのCSSを与えています：float:left, margin-left:1remなど。

float:none 
margin:0 auto; 
display:inline-block; 
width:100% 

はこのヘルプを願って何かする...