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

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

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

body {
    margin: 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;
}