Is there a way to ensure that two different elements in HTML are always the same height using CSS? I attempted to achieve this by setting each element to 50vh in the CSS, but it didn't work.
codepen: https://codepen.io/ichfickedeinemutterdudummerwichser/pen/vYpwGJv
body {
background-color: #404040;
font-family: 'Open Sans', sans-serif;
}
#welcome-section {
text-align: center;
padding-bottom: 200px;
}
#navbar {
background-color: #8FBC8F;
height: 50px;
text-align: right;
font-size: 25px;
font-family: strong;
}
.nav.links {}
a {
color: grey;
}
#projects {
background-color: blue;
}<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<div class="nav-links"> <a href="#about">about</a>
<a href="#projects">projects</a> <a href="#contact">contact</a>
</div>
</nav>
<section id="welcome-section">
<h1>Hey I am Silvan</h1>
<h2> a web developer</h2>
</section>
<section id="projects">
<h1>these are some of my projects</h1>
<iframe />
</section>
</body>
</html>