我目前正在开发一个网站，现在我专注于响应能力。突然间，不久前，我在移动设备上的网站会自动加载放大到页面的左上角。这不仅不方便，而且页脚会以页面的该角为中心加载，当您缩小时，它会向左偏移。我相信这是因为 max-width 属性被忽略，但我可能是错的。
我将附上我的代码以及我的意思的照片。
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;
}
我尝试更改 max-width 属性，但没有结果。我希望页面作为单列加载，而不滚动到水平方向。如果单词重叠，我想换到下一行。我希望你明白我的意思。
此代码会使您的视图崩溃。
<hr id="thinner">