As I am relatively new to creating responsive CSS, I haven't had much experience yet. When you open the code below in full screen and adjust the tab height, you'll notice that the smaller the height, the larger the gap between my hero and about section becomes. My goal is to maintain a consistent gap size across all devices. Any assistance would be greatly appreciated. Thank you.
/* Your CSS code goes here */<!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 href="style.css" rel="stylesheet" type="text/css" />
<title>Above Photography</title>
</head>
<body>
<div id="header" class="center">
<div id="navBar">
<img class="logo" src="./images/AbovePhotographyLogo.png" alt="Logo">
<nav>
<ul class=n av__links>
<li><a class="page" href="#">Home</a></li>
<li><a class="otherPages" href="#">Photography</a></li>
<li><a class="otherPages" href="#">Videography</a></li>
<li><a class="otherPages" href="#">Contact</a></li>
<a href="#"><button class = "bookNowNav">Book Now</button></a>
</ul>
</nav>
</div>
<div id="title">
<h1>Above <br>Photography</h1>
<h2 id="subTitle">Taking The<br>Perfect Picture</h2>
<button class="bookNow">Book Now</button>
<button class="learnMore">Learn More</button>
</div>
</div>
<div id="about">
<div id="aboutImage"></div>
<div id="aboutInfo">
<h2 class="">About</h2>
<p class="info">Your about information here.</p>
<button class="seeWork">Learn More</button>
</div>
</div>
</body>