Jump to content

Header width does not match body width


Meghan

Recommended Posts

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;
}

Link to comment
Share on other sites

(1)The <title>...</title> should be between <head>...</head> not <header>...</header>.... <header>...</header> should only be placed in <body>...</body>, and should replace the div with class 'header'

(2) <div class+"content">  should be <div class="content">

In its current state, it would be impossible to give a viable solution as incorrect usage of elements could affect the true outcome.

Validate your html at https://validator.w3.org/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...