Basically, I am trying to get my title and navbar vertically and horizontally centered with the title on top, but no matter what I do the navbar will not go under page title. They are just stacked horizontally.
I’ve tried line breaks and everything else I can, and It still won’t work how I want it to. I know it’s possible because I’ve seen it before on multiple occasions.
Page HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./home.css">
<title>comatose</title>
</head>
<body>
<div id="main">
<div class="subheader"><h1 id="title"><strong>PAGE TITLE</strong></h1></div>
<nav>
<ul>
<li class="navlink"><a href="#About">About</a></li>
<li class="navlink"><a href="#Invite">Community</a></li>
<li class="navlink"><a href="#Devs">Developers</a></li>
<li class="navlink"><a href="#Contact">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
Page CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
body {
height: 100vh;
width: 100vw;
margin: 0;
padding: 0;
}
#main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#title {
color: black;
font-size: 50px;
font-family: 'Montserrat', sans-serif;
}
.navlink {
display: inline-block;
padding: 5px;
list-style: none;
}
.navlink a {
font-size: 20px;
font-family: 'Poppins', sans-serif;
text-decoration: none;
color: black;
}
I want all of the navlinks to be below the "PAGE TITLE" header.
I’m pretty sure it doesn’t, but if it helps any: I use VSCode.
Edit – Also, I am new to web development so sorry if I did anything incorrectly.
>Solution :
If you want to remove the gap you can add a margin in the #title like this:
#title {
color: black;
font-size: 50px;
font-family: 'Montserrat', sans-serif;
margin: 10px;
}