Build a Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

My code keeps failing these 2 tests and I can’t figure out why:
24. Your Product Landing Page should use at least one media query.
25. Your Product Landing Page should use CSS Flexbox at least once.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Landing Page</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"/>
    <link rel="stylesheet" href="styles.css"/>
    <link href="https://fonts.cdnfonts.com/css/slopes" rel="stylesheet">
    <link href="https://fonts.cdnfonts.com/css/cooper-hewitt?styles=34277" rel="stylesheet">
  </head>

<body>
  <header id="header">
    <img id="header-img" src="https://www.canva.com/design/DAGvTeXX2yU/ZI5vJ5BZm8FmkKIpqXbqyQ/view"/>
    <h1 id="title">Peaks & <span>Pics</span></h1>
    <nav id="nav-bar">
      <a class="nav-link" href="#about-me">About Me</a>
      <a class="nav-link" href="#products">Products</a>
      <a class="nav-link" href="#contact-me">Contact Me</a>
    </nav>
  </header>
  <main>
    <section id="about-me">
      <h2>About Me</h2>
      <video width="600" height="350" controls id="video">
        <source src="movie.mp4" type="video/mp4">
      </video>
    </section>
    <section id="products">
      <h2>Products</h2>
        <div class="flexbox">
        <div class="calendars">
          <i class="fa fa-calendar"></i>
          <h3>Calendars</h3>
          <p>from £80</p>
        </div>
        <div class="prints">
          <i class="fa fa-image"></i>
          <h3>Prints</h3>
          <p>From £240</p>
        </div>
        <div class="courses">
          <i class="fa fa-graduation-cap"></i>
          <h3>Courses</h3>
          <p>From £180</p>
        </div>
      </div>
    </section>
    <section id="contact-me">
      <h2>Contact Me</h2>
      <form id="form" action="https://www.freecodecamp.org/email-submit">
        <label for="name">Name:</label>
        <input type="text" id="name"/>        
        <label for="email">Email Address:</label>
        <input type="email" name="email" id="email" placeholder="email@example.com"/>
        <label for="message">Message:</label>
        <textarea cols="50" rows="5"></textarea>
        <input id="submit" type="submit"/>
      </form>
    </section>
  </main>

</body>

</html>

/* file: styles.css */
:root, ::after, ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --dark-brown: #502F11;
  --brown: #8F531D;
  --green: #606C38;
  --off-white: #FFFAE0;
}

html {
  font-family: 'Cooper Hewitt', sans-serif;                                                
}

body {
  padding: 0;
  margin: 0;
}

/* HEADER */

header {
  position: fixed;
  display: flex;
  align-items: center;
  background-color: var(--off-white);
  border-bottom: 2px dotted var(--brown);
  width: 100%;
  height: 130px;
  z-index: 1000;
  padding-left: 20px;
}

h1 {
  font-family: 'Slopes', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 4em;
  color: var(--green);
  padding-left: 30px;
}

nav {
  display: flex;
  position: absolute;
  right: 80px;
}

nav a {
  text-decoration: none;
  color: var(--dark-brown);
  padding: 0 30px;
}

/* ABOUT ME */

main {
  padding-top: 150px;
  width: 70%;
  margin: 0 auto;
}

h2 {
  color: var(--green);
  font-size: 1.8rem;
  letter-spacing: 0.3rem;
  text-align: center;
}

#about-me {
  margin: 10px auto;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 3px dotted var(--brown);
}

/* PRODUCTS */

#products {
  border-bottom: 3px dotted var(--brown);
  padding-bottom: 20px;
}

#products h2 {
  width: 100%;
  margin: 20px 0;
}

#products div:not(.flexbox) {
  background-color: var(--green);
  border: 2px solid var(--dark-brown);
  color: var(--off-white);
  padding: 40px 10px;
  width: 250px;
  text-align: center;
}

.flexbox {
  display: flex;
  justify-content: space-around;
}

i {
  font-size: 8rem;
  padding: 10px 0;
}

/* CONTACT ME */

#contact-me {
  padding-bottom: 60px;
}

form {
  background-color: var(--brown);
  width: 60%;
  margin: 10px auto;
  padding: 20px 10px;
}

label {
  display: block;
  color: var(--off-white);
  margin: 5px 0;
}

input, textarea {
  display: block;
  width: 70%;
}

#submit {
  background-color: var(--off-white);
  margin: 10px 0;
  width: 140px;
  padding: 10px 30px;
  border-radius: 5px;
  border: 2px solid var(--dark-brown);
}

@media (max-width: 800px) {
  header {
    display: block;
    height: 200px;
    text-align: center;
    padding: 0;
    margin: 0;
  }
  img {
    display: none;
  }
  nav {
    display: block;
    margin: 5px auto;
    padding: 0;
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build a Product Landing Page - Build a Product Landing Page

2

Looks like all of the extra stylesheets are confusing the tests. Try removing those.