Product Landing Page: Floating Problem

HTML-CSS
1

Was able to afix the nav bar to the top of the page but the rest of the material has shrunk up underneath the header and I can’t figure out how to get all of it pinned down below the header. Help?

For the admin, it did not offer the opportunity to put my code here and I short of cutting and pasting it, I’m not sure how to get it attached.

<!DOCTYPE html>
<link rel="stylesheet" href="styles.css">
<html lang="en">
  <meta charset="UTF-8">
  <main>
  <link rel="stylesheet" href="styles.css"/>
  <section class="heading">
  <header id="header">
    <img id="header-img" src="https://jjgf.s3.us-west-1.amazonaws.com/api1653002617267657.jpg" alt="Gracie Humaita Jiu Jitsu - Bolton CA" class="gracie-logo"/>
  <h1 class="title"> Gracie Humaita Jiu Jitsu - Bolton CA</h1>
  <nav id="nav-bar">
    <ul>
    <li><a class="nav-link" href="#header">About Us</a></li>
    <li><a class="nav-link" href="#schedule">Schedule</a></li>
    <li><a class="nav-link" href="#contact">Contact</a></li>
  </nav>
   </header>
   <body>
  </section>
  <video id="video" src="https://youtu.be/Ova6HV2y8Mw" alt="Rios vs Macedo"></video>
 <About id="about">About Us</schedule>
  <p>We started BJJ in 1994, right after the first UFC and have been training people since. Come see what a quality martial arts experience looks like.</p>
  <schedule id="schedule">Schedule</schedule>
  <p> Our clases run 7am and 6pm Monday through Friday</p>
  <contact id="contact">Contact</contact>
  <p> Our email is info@GracieBJJCA.com</p>
  <form method="post" action="https://www.freecodecamp.com/email-submit" id="form">If you are interested in trying a free class, please enter your email here.
    <input id="email" name="email" placeholder="Enter your email" type="email"></input>
    <input id="submit" type="submit"></input>
  </form>
  </body>
  </main>
</html>

CSS

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color: ;
  color: white;
  font-family: 'exo 2', sans-serif;
  padding: 1em;
}
.header-img {
  width: 100%;
  object-fit: cover;
}
.title {
  text-align: center;
  color: red;
  font-size: 
}
.nav-link {
  background-color: white;
  color: blue;
}
.nav-link {
  align-items: center;
}
2

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

3

You can use position: sticky instead of fixed, otherwise you have to push down (margin/padding top) the content that comes after the header the same amount as the height of the header.

You should validate your HTML

https://validator.w3.org/nu/#textarea

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').