Centering text inside of parallax image made with SimpleParallax.js - css

Question

I'm very new to coding and I'm trying to add some subheader text to a parallax image on my project. I created the parallax effect with SimpleParallax.js and put it, and an h2 subhead, inside of a div, but the text just sits underneath the photo. I implemented the solution outlined here
I added position: relative styling to the parallax class and the following code to the h2 text:
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
But, the text still isn't positioned correctly. It moves the text all the way to the top of the page where the h1 text is.
I need help figuring out how to situate the h2 text inside of the parallax image, ideally center-left justified.
This is a snippet of the problem area:
<header>
<img src="https://cdn.glitch.me/7cebc84e-df9c-45e9-95c1-
516a7a17465b/Header.jpg?v=1675454184505" class="header-image" alt="A
rendered image of our funky trike" />
<h1 class="header-text">Join us for a Funk-Filled Ride as we
<br> Roll Out, Pop Up, and Get Down!</h1>
</header>
<div>
<img class="frame-2" src="https://cdn.glitch.global/7cebc84e-
df9c-45e9-95c1-516a7a17465b/Frame-2.jpg?v=1675454173228">
<h2 class="subhead-text">Roll Out: our portable party can go
wherever you go</h2>
</div>
<style>
.header-image {
width: 100%;
}
.header-text {
color: #f3f3f3;
font-family: Verdana, Geneva, Tahoma, sans-serif;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 7vh;
font-weight: bold;
font-style: italic;
background-color: #f41230bd;
width: 85%;
padding: 5px;
}
.subhead-text {
color: #f3f3f3;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-weight: bold;
font-style: italic;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.frame-2 {
position: relative;
} </style>
The whole project is available on Code Pen.
Thanks for any help!