I am trying to make the header sticky I have spent half an hour debugging it, could somebody help me out with it?

I am sure I am missing something but I cannot quite figure it out.

This is the codepen.

<https://codepen.io/hashir621/full/gORELOo>

HTML:

```
<div class="parent_header">

  <div class="header">

  </div>

</div>

<div class="test_height">

</div>

```

CSS

```
.parent_header {
  height: 100px;
}

.header {
  background-color: green;
  width: 100vw;
  height: 100px;

  position: sticky;
  top: 0;
}

.test_height {
  background-color: red;
  width: 100vw;
  height: 1000px;
}

```