Responsive Web Design - Build a Product Landing Page

Hello there, I am hoping someone can help me or shed some light on what I’m doing wrong here. Any and all help is greatly appreciated.

When I add a ‘margin-top’ to #get-started, both the fixed header and the #get-started section move down but I only want the #get-started section to do so. I can’t see why it is doing this… (probably something stupid i know!).

This is still a work in progress but any other comments upon any mistakes in my code are very welcome!

Thanks

HTML

<div id="page">
<header id="header">
<h1 id="title">MR Running Poles</h1>
<img id="header-img" src="https://st3.depositphotos.com/4430281/15783/v/600/depositphotos_157833884-stock-illustration-girl-runner-skyrunner.jpg" alt="MR Running Poles Logo">

<nav id="nav-bar">
  <ul>
    <li><a class="nav-link" href="#features">Features</a></li>
    <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
    <li><a class="nav-link" href="#pricing">Pricing</a></li>
  </ul>
</nav>
  </header>
  
  <div class="container"></div>

<section id="get-started">
  <h2>Handcrafted, durable and mountain ready</h2>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input 
           type="email"
           name="email"
           id="email"
           placeholder="Enter your e-mail address"
           required
           />
    <input
           type="submit"
           class="btn"
           id="submit"
           value="Get Started"
           />
  </form>
</section>

<div class="container">
  <section id="features">
    <div class="grid">
      <h2>Premium Materials</h2>
      <p>Our running poles are made of the highest quality materials.
    </div class="grid">
    <h2>Fast Shipping</h2>
    <p>Fast next day delivery available. We also provide free returns as standard.</p>
    </div>
  <div class="grid">
    <h2>Quality Assurance</h2>
    <p>All of our poles go through a rigourous inspection to ensure reliabilty.</p>
  </div>
  </section>
</div>

<section id="how-it-works">
  <iframe 
          id="video"
          width="950" 
          height="534" src="https://www.youtube.com/embed/TVUbiXCuVsA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       
</section>

<section id="pricing">
  <div class="product" id="steel">
    <h3>Steel</h3>
    <p>50 gbp</p>
    <ol>
      <li>Shaft Material: Steel</li>
      <li>Handle Material: Rubber</li>
      <li>Weight (Pair): 620 g</li>
    </ol>
  </div>
  
  <div class="product" id="aluminium">
    <h3>Aluminium</h3>
    <p>90 gbp</p>
    <ol>
      <li>Shaft Material: Aluminium</li>
      <li>Handle Material: Foam</li>
      <li>Weight (Pair): 420 g</li>
    </ol>
  </div>
    
  <div class="product" id="carbon-fibre">
    <h3>Carbon Fiber</h3>
    <p>140 gbp</p>
    <ol>
      <li>Shaft Material: Carbon Fiber</li>
      <li>Handle Material: Cork</li>
      <li>Weight (Pair): 315 g</li>
    </ol>
  </div>
  
</section>
</div>

CSS


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#page {
  position: relative;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
/*   min-height: 100px; */
  padding: 0 40px;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}

#header-img {
  width: 40px;
}

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

#get-started {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}

nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 400px;
}

#pricing {
  display: flex;
  justify-content: space-around;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
}

ol {
  list-style-type: none;
}

In the future it’s better if you post a link to your live code rather than having us copy/paste.
When you submit your projects the link has to be to your live code so that link will suffice.

If your goal is to pass the test that is failing, when you set your #header to position: fixed; you’ll also want to set it to the top.

Hope that helps.

Thank you for the advice, very much appreciated. Will provide a link in the future as advised, thanks again!