Проблема в лежачем положении относительно центровки по центру экрана

Question

Я использую Boosttrap версии 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>