Как правильно выровнять логотип и навигационную панель и логотип

Question

после многих исследований, я не понял, как я могу выровнять логотип своего веб-приложения и навигационных элементов. Я создал изображение логотипа, но я не могу правильно его выровнять! Надеюсь, некоторые из вас могут помочь мне.

Вот код 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 

Вот код Sass

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 стайлинга Navbar Styling Result - Application Image

Answer 1

B'coz из вас есть дать некоторые CSS, как : float:left, margin-left:1rem и т.п..etc.

ли что-то

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

надеюсь, что это поможет ...