How can I stop the text getting out of the div

Question

I'm trying to align text on a background img but when I resize the browser window, the text is jumping outside the image.

I want to set a responsive text with the image. If I resize the browser window, the text shoudnt jump outside

<section class="banner" id="home">
    <div class="banner-container">
        <div class="banner-text">
            <h3>Chicago</h3>
            <p>Thank you, Chicago - A night we won't forget!</p>
        </div>
    </div>
</section>

.banner {
    max-width: 130rem;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(54, 52, 52, 0.16), rgba(51, 49, 49, 0.12)), url(/coverband.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 300%);
    color: #e6e6e6;
}

enter image description here

Answer 1

For one, you can make sure no one resizes the window by using (resize: none;). But if you want the browser to be resized you can position the text with margin's rather than (position: absolute).

CSS

.banner {
    max-width: 130rem;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(54, 52, 52, 0.16), rgba(51, 49, 49, 0.12)), url(/coverband.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
}

.banner-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 1.2rem;
    position: absolute;
    margin: 540px 960px;
    transform: translate(-50%, 300%);
    color: #e6e6e6;
}

I used (margin: 540px 960px;). When the browser is resized I believe that margin will push the text to where it was making it stay in the same position.