Заголовок не перемещается влево целиком, когда браузер небольшой.

Question

Я делаю меню. С моей текущей реализацией содержимое заголовка не перемещается влево целиком, когда я делаю мой браузер маленьким. Как я могу сделать CSS стилей лучше, чтобы он двигался полностью влево, когда пользователь делает свой браузер меньше.

Текущий код ниже.

.header-container 
    .header 
    .logo 
     %img{:src => 'assets/logo.png'} 
    .menu 
     %ul 
     %li 
      %a{:href => '#'} Home 
     %li 
      %a{:href => '#'} Features 
     %li 
      %a{:href => '#'} Pricing 
     %li 
      %a{:href => '#'} Team 
     %li 
      %a{:href => '#'} Support 

Вот мой СКС

.header-container { 
width: 100%; 
height: 5%; 
background: url(menubg.jpg) no-repeat; 

.header { 
    width: 70%; 
    margin: 0 auto; 
    padding: 2%; 
    border: 1px solid red; 

    img { 
     float: left; 
    } 

    ul { 
     border: 1px solid green; 
     //min-width 
     li { 
      float: left; 
      border: 1px solid blue; 
      margin-right: 2%; 
     } 
    } 
} 
} 

Answer 1

Вы слышали о media query?