0

I have tried setting the padding and margins to 0. I have tried making the overflow-x and overflow-y values hidden. I have tried to set the width to 100% or 100vw. I don't really know what else to do, but i still have this whitespace.

here is the css attached to my header:

header{
  text-align: center;
  background: url("https://images.unsplash.com/photo-1579128860537-64fcd61568bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2559&q=80");
  background-size: cover;
  background-position: center;
  color:white;
  font-size: 22px;
  font-family: serif;
  height:100vh;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}
maxwe11
  • 309
  • 3
  • 8
  • Have you used dev tools on your browser to inspect it? If not, take a look at [how to sue dev tools](https://developers.google.com/web/tools/chrome-devtools). It looks like you are missing the thing actually affecting the page. That is just the header. It could be on the main element or somewhere else. Dev tools will help you find it easily. Nutshell is right click on the whitespace and inspect... look at the CSS rules to find the culprit. – Rodger Mar 04 '20 at 00:02

3 Answers3

1

Don't forget to zero out the margin on the body.

header{
  text-align: center;
  background: url("https://images.unsplash.com/photo-1579128860537-64fcd61568bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2559&q=80");
  background-size: cover;
  background-position: center;
  color:white;
  font-size: 22px;
  font-family: serif;
  height:100vh;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
} 

body { margin: 0; }
<header></header>

jsFiddle

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
1

Your header style is fine, it is the margin of your body that you need to set to 0. Simply add this style to your css file:

body {
  margin: 0;
}

Edit:

Another solution is to add normalize.css to your project: its a modern, HTML5-ready alternative to CSS resets. You can read more about it here.

JSFiddle

toh19
  • 1,083
  • 10
  • 21
0

The margin on the body defaults to 8px. You just need to set this value to 0.

body {
    margin: 0;
}