Particle JS - Covering the full page

Question

I have implemented Particle JS on the link attached. It is meant to be contained within the banner and then beneath it will be white background with the header text "hello there". For some reason the Particle.JS effect is taking over the full page background. Anyone know how to stop this?

https://codepen.io/mattrees92/pen/vYmKvNo

particlesJS("particles-js", {
  "particles": {
    "number": {
      "value": 355,
      "density": {
        "enable": true,
        "value_area": 789.1476416322727
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.48927153781200905,
      "random": false,
      "anim": {
        "enable": true,
        "speed": 0.2,
        "opacity_min": 0,
        "sync": false
      }
    },
    "size": {
      "value": 2,
      "random": true,
      "anim": {
        "enable": true,
        "speed": 2,
        "size_min": 0,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 150,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 0.2,
      "direction": "none",
      "random": true,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 83.91608391608392,
        "size": 1,
        "duration": 3,
        "opacity": 1,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
});

html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

header {
    width: 100%;
    height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background-size: cover;
}

#particles-js canvas {
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: black;
    background-size: cover;
}


.container {
    flex-wrap: wrap;
}

h1 {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 72px;
}

h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 24px;
}

.btn-primary {
    font-size: 1.25rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    display: inline-block;
    padding: 0.5em 1em;
    margin-top: 1em;
    color: #EB429C;
    background-color: transparent;
    border: #EB429C 0.125em solid;
    cursor: pointer;
    text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
    box-shadow: inset 0 0 0.5em 0 #EB429C, 0 0 0.5em 0 #EB429C;
    position: relative;
    transition: background-color 100ms linear;
}

.btn-primary::before {
    pointer-events: none;
    content: '';
    position: absolute;
    background: #EB429C;
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;

    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1.5em);
    opacity: 0.25;

}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 1em 0.5em #EB429C;
    opacity: 0;
    transition: opacity 100ms linear;
}

.btn-primary:hover,
.btn-primary:focus {
    color: black;
    background-color: #EB429C;
    border: #EB429C 0.125em solid;
    text-shadow: none;
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:hover::after {
    opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<header>
  <div id="particles-js">
    <div class="container">
      <h1> Test Bed </h1>
      <h2>Sub text to go here</h2>
      <button class="btn-primary"> CONTACT US </button>
    </div>
  </div>
</header>

<div class="container">
  <h1>Hello there</h1>
</div>

Answer 1

#particles-js canvas (absolute) needs to be relative to the header.

header {
    position: relative;
    ...
}