[SOLVED] Why is my max-width property being ignored?

I am currently working on a website, and right now I'm focussing on responsiveness. All of a sudden, a while back, my website on mobile devices would automatically load zoomed into the top-left corner of the page. Not only is this inconvenient, the footer is then loaded centred to that corner of the page, and when you zoom out it's offsetted to the left. I believe this is due to the fact the max-width property is being ignored, but I could be wrong.

I will attach my code and also a photograph of what I mean.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="I'm Sam King, an experienced and commited roblox luau developer.">

    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link rel="stylesheet" href="./styles/main.css">

    <link rel="icon" href="https://lh3.googleusercontent.com/fife/ALs6j_EO3J4WPJohRZwU-ytbCWH9PeacrGof_inoZp6hFBe-gyEdM4dZI9EXcZQTf_dIi6F1s6I5oJZiJ_t38lT6K8QEdQKGfN5rGae13fURmIdi1AvuvguJezy-PTLVKlFrvrEZi7gIpaz2D6M29XZl4XNXtgxZYaoc4D7o7VuHVi6WDvjO2jl2Cp9SfaNV585rFSXpSNnUhgbKFXBDKxFF-B8qEYTx4yAjlw_zYRilphZuPRA_AG81vya59CdrUFtsJHOvd6ADSNyYIPYBJCgDa8BIeopCpuO-SnbwRmAf8o5KV0miIx-cdq3b6l33S_EWQlRxDMWnMFMWVpoiLt_9H0PVSsO2_wAVAMO74t5_jEKAT1DIe4DcEAyAM1OkWlhFkY9mtg-nwXaKLSx4FRWMfbJoJfW4LsGb1PPuXzYxGLraSaGbDsxBPbop0qM5VqFVEzIg9EZjdnvPJ_bHEChOKdvrUOjxkowKyevedyaN_rxfdg4CaDuRHHbgjFrmbCSrvo9N10vaO1T4sx4yqIokOAN_jvv9buhz_xbKpsKC8DQxNcvQTJVI4L87PiGJ7ENNpM1QoFqrzvNcbI3Bt6OEMthmmyUQK-GBvTtRQ34_IIzIE7EcOmm0NQPniaOYqtTCfgzCcsc-f8RedEemEea4GFz1NetwvmCWccI7I0PPk3iaHmv0jqme0ww46nESVYN664T6_aUuGKjh9sC5UUYjDKytu313UF7GpV66LoDz0EqaxEeYtJflTsYebSkZoo9_WboHbVINIDvaynuLUMwf1YmkUE2hpgjDCZFaHGYA6_geP-Myn7aUlITog1R4LqilDk_jauaS1IYIQ1fzdAFj8B1NJPIvgXQ0WTrpxtyLtN2BO3-0x4H4-ZBr52NKXaiXyySubfrHrBPUlYNwIRCqjj-0ARcad-36mpYFa-Ri7d2FyAJvuEl_9Qn2AvURFCAFerdiGQHcmtmxTfIQLIMZBb78gemdFiUYX7AqbSDK3nWU0DBLtADpVFtEVGmksTHpcotZ_fRPUSgQDNwCWCGc6g07kOXKJdFFgtOGEqvY31BOWBFd2QwSHbd-NGyywxctVr_AuUusz3ddBT56vWeOpBZz79naIuw-4E_tUngD7-0NRvHIIjRBOPB_EqvWy5xix1MzMVSS7TfS0JCpdUnmFZZFbQzSsMb4ZcxOQkKb39490_HFgBlTslWhrl0mL2lF4ESsPzmEEOkawllEzgYro_x1hJJhz_czNGhLywEt8a8YWjlhula1l_jennH1-alsn79bjl8PAlrcGyILQM-bE6hYOZOyKGnKA3kj3WIJWdmZ-QtrIpHnJk6KeerMcUwLUaLERsSBLUMXMloeJPLLO3waihVQpqMuKkHMijjEPzMxlq-_j2RcaATmtAWLTBzy-QFlvREg0qZP8JnKn73sYaBOWBQ8zHPET4zT3uQwDrW9zK16jEkJO0t1vA_eD_ssSDYA_9qTOpqFx2H6zy5HS9mv4s0q8_5wN60Q8pus8N8BBMqBOzt8pQFG_MX7BCECJiezGPnte93UtfC6lJ5tPe3jQQTduXbJuQxTBLwdn2gdqVk8ALEzXsO-lTq2kssxWkpcqLKCj_uITG3mqPwCB3ot3sGoUHdZOCkLyRqnq2lSaifPJdvTyp-Nn9a4Y_P-BsvX_KydhgtZxtODkqZ-5G-gHiSv=w1920-h945">

    <title>Sam :) | Portfolio</title>
</head>
<body>
    <div class="maincontent">
        <div class="titlediv">
            <h1>Hi, I'm Sam.</h1>
            <h2>> Experienced Roblox/Luau Scripter</h2>
            
            <hr>
        </div>
        <div class="infodiv">
            <p>Welcome to my portfolio - it's still a work in progress. I'm Sam, and I specialize in scripting for Roblox. My main focus is delivering optimized, effective code to my clients, in a short amount of time.</p>

            <p>I personally prefer commissions , as it allows me to focus on the certain project at hand without getting overwhelmed. I've got 3 years worth of experience, working in teams such as...</p>
            <!-- <p class="support-link"><a href="" target="_blank">Support my work :)</a></p> -->
        </div>

        <div class="projects">
            <h3>Gibraltar</h3>
            <p>Gibraltar is a ro-nation group on roblox, with a main game featuring stunning graphics and interactive systems. It's a wide hub for roleplaying, developing skills and working in a team. </p>

            <h4>What I did in this role:</h4>
            <ul>
                <li>Added a duty logger with automatic discord webhooks</li>
                <li>Learned Knit (A powerful Roblox game framework)</li>
                <li>Fixed multiple bugs</li>
                <li>HALVED loading times</li>
            </ul>

            <h4>What this role taught me:</h4>
            <p class="indented">In this role I had to adapt to new systems, frameworks and other people's code. Learning stuff such as knit and the roblox physics engine, I was given the chance to expand my skills and help support the community.</p>

            <hr id="thinner">

            <h3>Saint Helena</h3>
            <p>Saint Helena was, yet another, ro-nation group on roblox. It was a bustling community for developers, enthusiasts and creators to collaborate. Being the only scripter in this team, I was tasked with most complex systems and had to overcome challenges.</p>
        </div>
    </div>
    <div class="footer">
        <a href="https://builtbysam.org">Home</a>
        <a href="https://www.builtbysam.org/about">About</a>
        <a href="https://www.builtbysam.org/bugs">Report a Bug</a>
    </div>
</body>
</html>

CSS:

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: #121212;
    color: #ffffff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
}

h1, h2 {
    margin: 0.5rem 0;
}

.maincontent {
    margin: 0 auto;
    padding: 2rem;
    max-width: 40em;
    text-align: left;
    word-wrap: break-word; 
}

.support-link {
    margin-top: 1rem;
    font-size: 1rem;
}

.footer {
    margin-top: auto;
    margin-bottom: 1em;
    display: flex;
    gap: 1rem;
    justify-content: center;
    font-size: 0.875rem;
}

a {
    color: #d6d6d6;
    text-decoration: none;
}

a:hover {
    color: #808080;
}

hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid #ffffff;
}

.inline-image {
    display: inline;
    float: right;
    width: 5em;
    height: 5em;
}

.projects {
    background-color: #1c1c1c;
    border-radius: 10px;
    padding-top: 1%;
    padding: 1em
}

.indented {
    margin-left: 1.2em;
}

#thinner {
    width: 35em;
}

I tried to change the max-width property, but to no result. I want the page to be loaded in as single column, with no scroll to the horizontal. If the word overlaps, I would like to break onto the next line. I hope you understand what I mean.