I’ve been making a website, which includes the elements of it being centred. This works perfectly on local environment (visual studio code – live server plugin), but when deployed to vercel via github the page messes up. It’s not like the stylesheet got disconnected though, the fonts are still there.
The element which isn’t centering is the class infodiv.
CSS File:
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;
}
.infodiv {
margin: 0 auto;
padding: 2rem;
max-width: 600px;
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;
}
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link rel="stylesheet" href="./styles/main.css">
<title>Sam King</title>
</head>
<body>
<div class="infodiv">
<h1>Sam King</h1>
<h2>Experienced Roblox/Luau Scripter</h2>
<hr>
<p>Welcome to my portfolio - it's still a work in progress. I'm sam, and I specialize in scripting for Roblox using Luau. My main focus is on creating efficient and optimized code for various projects.</p>
<p class="support-link"><a href="" target="_blank">Support my work :)</a></p>
</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>
I’ve tried rewriting the code (to the best of my abilities), but to no luck.
Im expecting it to be centered, such as in the example below.
Hoping For/Local Server Result:
centered website
New contributor
Sam is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.