.hero-banner {
    position: relative; /* to scope the absolute child */
    width: 100%;
}

    .hero-banner img {
        display: block; /* remove inline-img whitespace issues */
        width: 100%; /* span full browser width */
        height: auto; /* natural aspect ratio */
    }

.page-content {
    position: absolute; /* float on top of the image */
    top: 60%; /* vertically center it */
    left: 50%; /* horizontally center it */
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 446px; /* or whatever your form width is */
    margin: 0; /* no need for negative margins any more */
}