メニューを作っています。私の現在の実装では、ブラウザを小さくすると、ヘッダーのコンテンツが完全に左に移動しません。ユーザーがブラウザを小さくしたときに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%;
}
}
}
}