Trying to get Header & Footer over background slider

I think the best way to do this while not fussing with the HTML too much to leave options open for other page layouts would be to focus on making the slider full screen and use absolute positioning. Try something like:

.slider {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

You'll notice I set both a height and width now that I've switched it to position: absolute;. You'll also need to declare top and left values to make sure it sticks to the correct part of the page. Adding z-index: -1 will keep it behind all other content.

Because switching to position: absolute; takes the .slider element out of the normal document flow, you'll probably need to tweak your flexbox properties and height properties on body to make sure your header and footer stay at the top and bottom of the page.