Formatting text on hero images

Hi! I'm trying to format text on my hero image. It's in the bottom right, and I would love it to be directly under the nav bar. https://kittenwithawhip.com/

This is the .css I'm using trying to control it, but all the tinkering I've done has simply gotten me further from where I want to be.

Thanks!

.page-hero-content {
    padding: 20px;
    border: 0px solid rgba(211,211,35,0.2);
    border-radius: 10px;
    max-width: 700px;
}

@media (max-width: 1200px) {
    .page-hero-content {
         padding: 10px;
         margin: auto;
    }
}

.inside-page-hero {
    display: -ms-grid;
    display: grid;
    grid-template-areas: "left right";  
    -ms-grid-columns: 50% 50%;
    grid-template-columns: 50% 50%;
}

.page-hero-content {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: right;
}

@media (max-width: 768px) {
    .inside-page-hero {
        display: block;
    }
}