Errors after switching from internal CSS to external stylesheet

Hi, guys. I decided to revisit the Responsive Web Design projects and been trying out uploading it to GitHub. I’m on the Product Landing Page project and have hit a snag. After pulling out the CSS from the HTML and shoving it into styles.css, the Test Suite that once gave me a pass all, is showing only 14/16.
The two errors are:

  1. My product landing page should have at least one media query.
  2. My product landing page should utilize CSS flexbox at least once.

I have read the threads started by Dashack in Product Landing Page // Your Product Landing Page should use at least one media query

My problem seems similar to Hitch95, although I can’t seem to find his separate thread.

The page is working as it always has. Validators show no errors. No syntax errors on the filename. No missing/misplaced brackets. I have a codepen for this (passed all the tests) and I copypasted that code into styles.css — no juice, 14/16 only.

The CSS code:

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");

/*  Comments are for developer only. Do not be offended.    */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  font-size: 10px;
  font-family: "Noto Sans", sans-serif;
  background-color: #ebebeb;
  /*  This makes the navbar and the headline stretch the width of the viewport    */
  margin: 0;
  padding: 0;
}

/*  anchors the logo to the top-left of the viewport    */
#header-img {
  top: 0;
  left: 1rem;
}

#nav-bar {
  background-color: #333331;
  /*  anchors the navbar to the top of viewport   */
  position: fixed;
  top: 0;
  height: 6.4rem;
  width: 100%;
  z-index: 999;
}
.navcont {
  float: right;
  margin-top: 2.1rem;
}

.nav-link {
  color: white;
  font-size: 1.6rem;
  background-color: #333331;
  text-transform: uppercase;
  text-decoration: none;
  padding: 21px;
}

.nav-link:hover {
  background-color: white;
  color: #333331;
  transition: ease 0.2s;
}

/*  aka the hero image   */
.headline {
  font-size: 4em;
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    url(https://www.berlebach.de/img/background/amrum.jpg);
  /*  To clear the navbar */
  margin-top: 6.4rem;
  color: white;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 5rem;
  text-align: center;
}

#features,
#photokina,
#iframe {
  font-size: 1.6rem;
  max-width: 580px;
  width: 100%;
  margin: 7rem auto 7rem auto;
  text-align: center;
  border: hidden;
}

/*  settings for the tiny images in the #features section   */
#features img {
  width: 55%;
  display: block;
  margin: 0 auto;
  padding: 1rem;
}

/*  To hold the 3 cards   */
.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 7rem;
}

.card {
  /*  The flex here is for EACH card. The image, title, description,  */
  /*  and button to be spaced out evenly from top to bottom.          */
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  /*  Without the above lines, button will not go to the bottom            */
  /*  of all three cards, only the longest one.                            */
  /*  There could be another solution, but this is what I went ahead with. */
  font-size: 1.6rem;
  text-align: center;
  margin: 3rem;
  width: 35rem;
  background-color: white;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 8px grey;
}

.card h3,
span {
  display: block;
}

.card p {
  margin: 0 2.2rem 2rem 2.2rem;
}

.card button {
  padding: 1rem 0 1rem 0;
  width: 100%;
  font-size: larger;
  text-transform: uppercase;
  border: none;
  border-radius: 0 0 10px 10px;
  background-color: rgb(236, 140, 49);
  font-weight: bold;
}

.card button:hover {
  cursor: pointer;
  background-color: #f07228;
}

.card-image {
  height: 120px;
  width: auto;
  background-size: cover;
  margin: 4rem auto 0 auto;
}

.call-to-action {
  margin: 0 auto;
  font-size: 1.6rem;
  text-align: center;
  padding: 3rem;
  width: 70rem;
  background-color: rgb(236, 140, 49);
  border: none;
  border-radius: 8px;
  box-shadow: 0 0 8px grey;
  margin-bottom: 7rem;
}

input {
  margin: 0.3rem;
  padding: 2px 1rem 2px 1rem;
  width: 50%;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  border: none;
  border-radius: 0.5rem;
}

.submit {
  width: 10rem;
  border-radius: 0.5rem;
  background-color: rgb(4, 175, 4);
}

.submit:hover {
  cursor: pointer;
}

/*  container for the footer elements   */
.footer {
  font-size: 1.5rem;
  width: 100%;
  background-color: #403f3e;
  color: white;
  text-align: center;
}

.footer-nav {
  padding: 2rem 0 0 0;
}

.footer-bar {
  color: white;
  text-decoration: none;
  /* adds space to the elements of the footer-bar */
  padding: 0 1rem 0 1rem;
}

.copyright {
  padding-bottom: 1rem;
}

.pfcc {
  font-size: 1.5rem;
  padding-bottom: 2rem;
}

.fcc {
  margin-bottom: -0.4rem;
}

@media screen and (max-width: 836px) {
  #header-img {
    /*  anchors the logo to the top center of the navbar   */
    top: 0;
    margin: auto;
    display: block;
  }

  .navcont {
    width: 100%;
    margin-top: 0;
  }

  .nav-link {
    float: none;
    display: block;
    text-align: center;
    font-size: 1.4rem;
    padding: 11px;
  }

  .headline {
    font-size: 3.5rem;
    /* so the image will not be overlaid by the navbar */
    margin-top: 228px;
  }

  #photokina > iframe {
    width: 100%;
  }

  .call-to-action {
    width: 100%;
  }

  #features,
  #photokina,
  #pricing {
    /*  doesn't work very well when full screen */
    padding-top: 228px;
    margin-top: -228px;
  }
}

@media screen and (max-width: 670px) {
  .headline {
    height: 75%;
    padding: 3rem;
    font-size: 3.5rem;
  }

  label {
    display: block;
  }

  input {
    width: 100%;
  }

  .submit {
    width: 100%;
  }
}

The HTML:

<!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" />
    <title>FCC - Landing Page</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <img
          id="header-img"
          src="https://www.berlebach.de/img/berlebach-logo.png"
          alt="Berlebach Tripods"
        />
        <div class="navcont">
          <a class="nav-link" href="#features">Features</a>
          <a class="nav-link" href="#photokina">Photokina</a>
          <a class="nav-link" href="#pricing">Pricing</a>
          <a class="nav-link" href="#form">More Info</a>
        </div>
      </nav>
    </header>

    <main>
      <div class="headline">
        <h1>Ash Wood Tripods</h1>
        <h2>The genuine alternative</h2>
      </div>
      <!-- closes .headline-->

      <div id="features" class="features-section">
        <h3>Premium Materials</h3>
        <p>
          For more than 120 years, high-quality tripods made of native ash wood
          have been produced in Mulda. The excellent characteristics of this
          type of wood in terms of vibration damping, stability and robustness
          were appreciated by the most famous photographer David and Meerwarth
          at the beginning of the 20th century. In their book
          <q>Ratgeber im Photographieren</q> they recommended all demanding
          photographers <q>a solid wooden Berlebach tripod.</q>
        </p>
        <hr />
        <h3>Fast Delivery</h3>
        <p>
          We deliver, insurance covered, world-wide via
          <img
            src="https://www.berlebach.de/img/delivery-services.png"
            alt="delivery via courier"
          />
        </p>
        <hr />
        <h3>Certification</h3>
        <p>
          We are certified according to DIN EN ISO 9001:2015.
          <img
            src="https://www.berlebach.de/img/certifications3.png"
            alt="certifications"
          />
        </p>
      </div>
      <!--closes #features-->

      <div id="photokina">
        <iframe
          id="video"
          width="568"
          height="320"
          src="https://www.youtube.com/embed/T9aOg92c4E0"
          title="YouTube video player"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        ></iframe>
      </div>

      <div id="pricing">
        <section class="container">
          <div class="card">
            <img
              class="card-image"
              src="https://www.berlebach.de/bilder/produktbilder/1673_mittel.jpg"
              alt="Tripod"
            />
            <h3>Tripods<span>From $279</span></h3>
            <p>
              Berlebach astro tripods are the measure of all things for
              astronomers. Large wood cross sections with optimised profiles
              support the extremely high vibration damping of the ash wood. In
              this ways, perfect results are guaranteed for astronomic
              observations.
            </p>
            <button>buy now</button>
          </div>

          <div class="card">
            <img
              class="card-image"
              src="https://www.berlebach.de/bilder/produktbilder/2468_mittel.jpg"
              alt="Tripod Head"
            />
            <h3>Tripod Heads<span>From $120</span></h3>
            <p>
              These big tripod heads are particularly suitable for heavy
              equipment. All tilt heads have two integrated circular bubbles for
              exact alignment. All models are provided with base thread 3/8" and
              camera thread 1/4", also 3/8" when desired.
            </p>
            <button>buy now</button>
          </div>

          <div class="card">
            <img
              class="card-image"
              src="https://www.berlebach.de/bilder/produktbilder/1840_mittel.jpg"
              alt="Accessories"
            />
            <h3>Accessories<span>From $22.50</span></h3>
            <p>
              For our tripods, we offer you a wide range of accessories, such as
              mountings, adapters, dovetail clamps, as well as inch screw. If
              you should have any special wishes beyond that, then please
              contact us. We produce according to customer's wishes.
            </p>
            <button>buy now</button>
          </div>
        </section>
      </div>
      <!--closes #pricing-->

      <form
        id="form"
        class="call-to-action"
        action="https://www.freecodecamp.com/email-submit"
      >
        <label id="email-label" for="email">For more information: </label>
        <input
          type="email"
          name="email"
          id="email"
          class="form"
          placeholder="Enter a valid email address"
          required
        />
        <input type="submit" id="submit" value="Submit" class="submit" />
      </form>
    </main>

    <footer>
      <div class="footer">
        <nav class="footer-nav">
          <a class="footer-bar" href="#">Privacy</a>
          <a class="footer-bar" href="#">Terms</a>
          <a class="footer-bar" href="#">Contact</a>
        </nav>
        <p class="copyright">Copyright 2021 by Berlebach Corporation</p>
        <p class="pfcc">
          A project in the
          <a
            href="https://www.freecodecamp.org/learn/responsive-web-design/#css-grid"
          >
            <img src="https://design-style-guide.freecodecamp.org/downloads/fcc_primary_large.png" 
              alt="FreeCodeCamp logo"
              width="143"
              height="16"
            >
          </a>
          Responsive Web Design Course
        </p>
      </div>
    </footer>

    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  </body>
</html>

Ignore the weird footer, I’m gonna work on that after all the tests passes.

Anyone? Or do I have to live with this quirk?

I’m thinking the tests are probably aimed toward a mobile-first design paradigm. Can anyone confirm?