-1
본문 너비는 960px입니다. 그러나 고정 머리글 div의 너비를 100 %로 설정하면 960px 본문 너비를 초과하고 너비는 1349px입니다.고정 div 너비 100 %, 너비 960px를 초과합니다.
960px 본문 너비와 일치하도록 100 %를 얻으려면 어떻게해야합니까?
HTML
<body>
<header>
<div class="banner">
<div class="logo">
<h1>CML International</h1>
</div>
<nav class="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</nav>
</div>
</header>
</body>
CSS
/* FONTS
============================*/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700);
/* BODY
============================*/
* {
font-family: 'Ubuntu', sans-serif;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
body {
width: 960px;
height: 1000px;
margin: 0 auto;
margin-top: 80px;
}
/* BANNER
============================*/
.head {
width: 960px;
}
.banner {
width: 100%;
position: fixed;
top: 0;
height: 80px;
background-color: #111;
z-index: 100;
}
.logo,
.navigation {
position: absolute;
}
.logo,
.navigation li {
display: inline-block;
}
.logo {
left: 20px;
top: 21.5px;
}
.logo h1 {
margin-top: 0;
margin-bottom: 0;
}
.navigation {
right: 20px;
bottom: 31px;
}
.navigation li {
margin-left: 15px;
}
.navigation li a {
text-decoration: none;
}
.navigation li a,
.logo {
color: #fff;
}