I have a header with 100% width and grey line under it. The line should use 100% width of the browser window. But when I reduce the browser width the grey line doesn’t take the whole width of the webpage. Why? Strange, but a body tag takes certain width value although no width setted up for the body in css. Please, check the picture below and the code. Thanks a lot!
If you reduce browser width, there is a problem: no grey border on the right any more! https://drive.google.com/file/d/0B35EX-b9d628ZmxBWFJjOTF1eFU/view
Here is the code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Max's Icebrrrg</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="headerInner">
<div class="logo">
<h1>Icebrrrg</h1>
</div>
<div class="mainNav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Three Column</a></li>
<li><a href="">Sidebar Right</a></li>
<li><a href="">Sidebar Left</a></li>
<li><a href="">Full Width</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
</header>
<div class="contentWrapper">
</div>
<footer>
</footer>
</body>
</html>
CSS
* {
box-sizing: border-box;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
}
body {
font: 14px/21px "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
color: #444;
}
/******************** HEADER ************************/
header {
border-bottom: 1px solid #E3E3E8;
margin-bottom: 30px;
}
.headerInner {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.logo {
width: 157px;
height: 63px;
background: url(../img/icebrrrg-logo.png) no-repeat;
background-size: contain;
margin: 22px 0;
float: left;
display: inline;
}
.logo h1 {
text-indent: -99999px;
}
.mainNav {
float: right;
display: inline;
}
.mainNav ul {
margin: 44px 0;
padding: 0;
list-style: none;
}
li {
display: inline;
}
.mainNav a {
text-decoration: none;
color: #2C88C9;
padding: 48px 10px 43px;
font-size: 12px;
border-bottom: 3px solid white;
}
.mainNav a:hover {
font-weight: bold;
border-bottom: 3px solid #2C88C9;
}