No matter what I try, nothing I've seen on stackoverflow or even youtube will work. This is my current html:
(The text I'm talking about is the one with the about-me class, with the text "A bit more about me.")
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title id="ltitle">Cocolennon's Dev Stuff</title>
<link rel="icon" type="image/x-icon" href="favicon.png">
<meta name="description" content="I'm a 15 year old software and web developer from France.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta content="#A020F0" data-react-helmet="true" name="theme-color">
<meta content="https://www.cocolennon.xyz/favicon.png" property="og:image" />
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<header class="header">
<a href="#" class="logo">Cocolennon</a>
<nav class="navbar">
<a href="#about-me">About Me</a>
<!--
<a href="#">Projects</a>
<a href="#">Contact</a>
-->
<a href="#" onclick="setLang('en')">English</a>
<a href="#" onclick="setLang('fr')">Français</a>
</nav>
</header>
<h1 class="name">
<span id="lname">Sup, my name's </span>
<span style="color:darkorchid" id="lcoco">Cocolennon</span>
<span class="aka" id="laka"> aka Coco</span>
</h1>
<h1 class="desc">
<span id="lshort">I'm a 15 year old software and web developer from </span>
<span style="color:blue" id="lfr">Fr</span><span id="lan">an</span><span style="color:red" id="lce">ce</span>.
</h1>
<div class="hsocials">
<nav class="socials">
<a href="https://www.youtube.com/@cocolennon_" target="_blank">
<button class="button" style="background-image: url(images/svgs/youtube.svg);"></button>
</a>
<a href="https://discord.gg/yqG4u2JnrV" target="_blank">
<button class="button" style="background-image: url(images/svgs/discord.svg);"></button>
</a>
<a href="https://github.com/Cocolennon" target="_blank">
<button class="button" style="background-image: url(images/svgs/github.svg);"></button>
</a>
<a href="https://paypal.me/Cocolennon" target="_blank">
<button class="button" style="background-image: url(images/svgs/paypal.svg);"></button>
</a>
<a href="https://steamcommunity.com/id/Cocolennon/" target="_blank">
<button class="button" style="background-image: url(images/svgs/steam.svg);"></button>
</a>
<a href="https://namemc.com/profile/CCocolennon.1" target="_blank">
<button class="button" style="background-image: url(images/svgs/namemc.svg);"></button>
</a>
<a href="https://e-z.bio/cocolennon" target="_blank">
<button class="button" style="background-image: url(images/svgs/ezhost.svg);"></button>
</a>
<a href="https://www.twitch.tv/cocolennon_" target="_blank">
<button class="button" style="background-image: url(images/svgs/twitch.svg);"></button>
</a>
<a href="mailto:contact@cocolennon.xyz" target="_blank">
<button class="button" style="background-image: url(images/svgs/gmail.svg);"></button>
</a>
</nav>
</div>
<h1 class="about-me">A bit more about me.</h1>
<script src="script.js"></script>
</body>
</html>
And here is my current css:
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Kanit', sans-serif;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
html {
min-height: 100vh;
}
body {
background-image: linear-gradient(rgba(36,37,34,0.9),rgba(36,37,34,0.9)), url('images/grid.png');
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 100px;
background:#46354e;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
box-shadow: 0px 0px 30px;
}
.logo {
font-size: 32px;
color: #fff;
text-decoration: none;
font-weight: bolder;
}
.navbar a {
position: relative;
font-size: 18px;
color: #fff;
font-weight: lighter;
text-decoration: none;
margin-left: 3vw;
transition: .3s;
}
.navbar a:hover {
color: darkorchid;
}
.navbar a::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 2px;
background: #fff;
transition: .3s;
}
.navbar a:hover::before {
width: 100%;
left: 0;
background: darkorchid;
}
.name {
position: absolute;
top: 30%;
left: 10%;
color: #fff;
font-size: 44px;
}
.aka {
color: rgb(94, 94, 94);
font-size: 22px;
font-style: italic;
}
.desc {
position: absolute;
top: 30%;
left: 10%;
color: #fff;
font-size: 44px;
font-size: 28px;
font-weight: lighter;
top: 40%;
}
.hsocials {
position: absolute;
top: 50%;
left: 9.2%;
width: 70%;
display: flex;
justify-content: space-between;
align-items: center;
}
.socials a {
position: relative;
font-size: 18px;
color: #fff;
font-weight: lighter;
text-decoration: none;
margin-left: 10px;
transition: .3s;
}
.button {
position: relative;
background-color: #525050;
border: none;
color: white;
padding: 25px;
font-size: 16px;
border-radius: 50%;
width: 20px;
height: 20px;
background-size: 70%;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
transition: 0.3s;
}
.button:hover {
background-color: #949191;
border-radius: 30%;
}
.about-me {
position: absolute;
top: 110%;
display: block;
text-align: center;
}
I've tried stuff like using display: flex and justify-content: center but that didn't work aswell.
Using margin-left: auto and margin-right: auto didn't work either.
