当浏览器很小时，标题不会完全向左移动

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

这是我的scss

.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吗？