Home page on mobile is ugly :( CSS/Bootstrap issue

Something about my bootstrap/CSS for the home page is causing my text to scrunch up real small when viewed on a mobile browser.

The relevant code from the home.ejs Views file:

<body class="d-flex text-center text-white bg-dark">
    <div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
        <header class="mb-auto">
            <%- include('partials/navbar')%>
        </header>
        <main class="w-100 px-3">
            <h1 class="mt-4">The Beacon Network</h1>
            <!-- <div id="cluster-map">
            </div> -->
            <img class="my-.5" src=../images/BeaconLogo1.png alt="Logo should be here">
            <p class="homeText lead p-2"> Welcome to <strong>the Beacon Network!</strong><br>
                Thanks for helping us test the platform at this early stage!<br>
                Here you will find a database of <b>user, group, and initiative pages</b> that highlight avenues to participation.<br>
                Create an account to explore, join, and create groups and initiatives.
            </p>
            <a href="/users/register" class="m-3 py-2 btn btn-lg btn-secondary font-weight-bold bg-white">Create an Account</a>
            <a href="/explore" class="m-3 py-2 btn btn-lg btn-secondary font-weight-bold bg-white">Explore the Map</a>
            <a href="https://www.thebeaconnetwork.org/become-a-supporter" target="_blank" rel="noopener noreferrer" class="m-3 py-2 btn btn-lg btn-secondary font-weight-bold bg-white">Give to Support Beacon</a>
            <p class="homeText lead p-2">
                Soon, you'll be able to search and filter through these pages to find the communities and causes you care about.<br>
                In version 2, you'll be able to communicate directly with other users and groups right on Beacon, with encrypted threaded discussions, group chat, and direct messaging.
            </p>
        </main>
        <footer class="mt-auto text-white-50">
            <p>&copy; 2021 Beacon</p>
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script>
        const mapToken = '<%-process.env.MAPBOX_TOKEN%>';
    </script>
    <script src="/javascripts/clusterMap.js"></script>
</body>

Beacon24 / v0

Home page on mobile is ugly :( CSS/Bootstrap issue #19