CODEWITHSUNDEEP
htmlcss
user5135654
user5135654

Reputation:

Why does my header not take up the whole width of the page?

Sorry, if my problem is a little bit too specific, but I have not found the answer anywhere else. On my website, there is a header that is supposed to take up the whole width of the screen, but it does not. There is always a blank space between the top, and the sides. I have tried display: block; min-width: 100%, just width: 100% and many more variations but I just can't find out how to get rid of it. Anybody have ideas? Thanks!

FULL CODE

/* GLOBAL */

body {
  /*background-color: #1abc9c;
	display: block;
	min-width: 100%;*/
}
#content {} header {
  display: block;
  min-width: 100%;
  height: 100px;
  background-color: #34495e;
  border-top: 5px solid #1abc9c;
}
<!DOCTYPE html>
<html>

<head>
  <title>Example Website</title>

</head>

<body>
  <div id="content">

    <header>

      <img src="REPLACE.png" />

    </header>

  </div>
</body>

</html>

Upvotes: 0

Views: 102

Answers (1)

Steve
Steve

Reputation: 9551

By default, the browser adds some margin to body element. Thus to fix it, add margin:0; to your body CSS.

body {
  margin:0;
}

JSfiddle demo

Upvotes: 3

Related Questions