与屏幕中央居中有关的躺下问题

Question

我正在使用引导程序版本4.1，在纵向屏幕上它可以正常工作，但是当我将其放置在较小的设备和横向上时，内容将变得比屏幕“大”，并且在所有内容之上，我该怎么做才能修复这个吗？

 <style>html, body { height: 100%; }</style>
        <main class="h-100">
            <div class="container d-flex flex-column justify-content-center h-100">
                <div>
                    <img src="/img/icons/over18.svg" alt="OVER 18 YEARS OLD" class="img-fluid OYOI mx-auto d-block">
                </div>
                <div class="mt-3">
                    <h1 class="text-center ml-4">WOW !!!</h1>
                    <h1 class="text-center"><span class="font-weight-bold">{{ person.name }}</span>, you are <span class="font-weight-bold">{{ person.age }} years old!</span></h1>
                </div>
                <div class="mt-4">
                    <h3 class="font-weight-light text-center text-white">You are now responsible for yourself, Welcome adult life!</h3>
                </div>
                <div class="mt-4">
                    <button type="button" class="btn btn-lg bg-dark text-white mx-auto d-block w-100">BACK</button>
                </div>
            </div>
        </main>