如何阻止文本脱离div

Question

我正在尝试在背景图像上对齐文本，但是当我调整浏览器窗口大小时，文本会跳到图像之外。

我想设置带有图像的响应文本。如果我调整浏览器窗口的大小，文本不应该跳到外面

<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;
}