Header width does not match body width in CSS Posted November 6, 2017 I'm trying to get the image in the body to expand across the full length of the screen like the header. I'm using codepen if that makes a difference. Thanks. <header> <title>Meghan's - Website</title> </header> <body> <div class="header"> <div class="container"> <div class="logo"> <h1><a>Meghan</a></h1> </div> <div class="navigation"> <ul> <li><a>Home</a></li> <li><a>About</a></li> <li><a>Portfolio</a></li> <li><a>Contact</a><li> </ul> </div> </div> </div> <div class="container"> <div class+"content"> <img id="lav" src="https://media.licdn.com/media/AAEAAQAAAAAAAAspAAAAJDY4N2Y3Y2Q2LTdkMGQtNGVmNi04MTdkLWE2NWQ2NzJmNTU4Nw.jpg"> </div> </div> </body> body{ width: 100%; } .header { background: #E0E0E0; width: 100%; position: fixed; opacity: 0.5; } .logo { float: left; font-family: palatino, arial, sans-serif; padding-left: 30px; } a { text-decoration: none; color: #585858; } ul li { list-style: none; float: left; font-size: 15px; padding-left: 30px; padding-top: 20px; } .navigation{ float: right; } .container{ width: 100%; } #lav { padding-top: 68px; width: 100%; height: 600px; }
Header width does not match body width
in CSS
Posted
I'm trying to get the image in the body to expand across the full length of the screen like the header. I'm using codepen if that makes a difference. Thanks.
<header>
<title>Meghan's - Website</title>
</header>
<body>
<div class="header">
<div class="container">
<div class="logo">
<h1><a>Meghan</a></h1>
</div>
<div class="navigation">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Portfolio</a></li>
<li><a>Contact</a><li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class+"content">
<img id="lav" src="https://media.licdn.com/media/AAEAAQAAAAAAAAspAAAAJDY4N2Y3Y2Q2LTdkMGQtNGVmNi04MTdkLWE2NWQ2NzJmNTU4Nw.jpg">
</div>
</div>
</body>
body{
width: 100%;
}
.header {
background: #E0E0E0;
width: 100%;
position: fixed;
opacity: 0.5;
}
.logo {
float: left;
font-family: palatino, arial, sans-serif;
padding-left: 30px;
}
a {
text-decoration: none;
color: #585858;
}
ul li {
list-style: none;
float: left;
font-size: 15px;
padding-left: 30px;
padding-top: 20px;
}
.navigation{
float: right;
}
.container{
width: 100%;
}
#lav {
padding-top: 68px;
width: 100%;
height: 600px;
}