It seems like you have created a grid layout with three "rows": one for the "navbar," one for the "content," and one for the "footer," using the following CSS:
display: grid;
grid-template-rows: auto 1fr auto;
To indicate which row each section belongs to, you can wrap the containers for the rows in a wrapper .wrapper and specify the row number using grid-row: 2/2; for the content in row 2.
I have made some adjustments to your CSS, adding borders to visualize the layout. You may want to remove them later, but they help show the positioning in the flow. This is just a starting point, and you can build upon it further.
Below is the modified CSS code with the additional borders:
@import url('https://fonts.googleapis.com/css?family=Roboto:700&display=swap');
* {
padding: 0;
margin: 0;
}
body {
background-color: ghostwhite;
padding: 0;
margin: 0;
border: solid orange 3px;
}
.wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
border: lime 4px dashed;
}
/* Rest of the CSS properties with added borders */
<!doctype html>
<html lang="en ">
<head>
<meta charset="utf-8">
<title>Moritz </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<nav class="navbar navbar-container">
<img class="logo" src="logo.png">
<ul class="menu-items">
<li> <a class="active" href="#">Home</a></li>
<li> <a href="#">About</a></li>
<li> <a href="#">CV</a></li>
<li> <a href="#">Favourites</a></li>
<li> <a href="#">Contact</a></li>
</ul>
</nav>
<div class="center content-container">
<h1>Hi, I'm Moritz.</h1>
<h2>I'm a student.</h2>
<div class="buttons">
<button>Explore more</button>
<button class="btn">Contact me</button>
</div>
</div>
<footer class="footer-container">
<div class="footer-content">
<h3>Moritz </h3>
<p>Thank you for browsing. I hope to hear from you soon!</p>
<ul class="socials">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
<li><a href="#"><i class="fa fa-phone"></i></a></li>
</ul>
</div>
<div class="footer-bottom">
<p> Copyright © 2021 Moritz </p>
</div>
</footer>
</body>
</html>