Problem with the product landing page challenge

hi, everyone im having a problem solving this three parts of the mentined challenge,

5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

i think i did it well in this one because everytime i click over the links of my nav bar, they take me back to the main page.

12. When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit).

i copied and pasted it the link several times and nothing happens.

  1. The navbar should always be at the top of the viewport.

in this one i used “position:fixed” its that rigth?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/style.css" />
    <link rel="icon" href="img/Union-U-Orange.png" />
    <link
      href="https://fonts.googleapis.com/css2?family=Assistant:wght@200;300;400;600;700;800&display=swap"
      rel="stylesheet"
    />
    <title>UNION BINDINGS CO.</title>
  </head>
  <body>
    <header id="header" class="stick-header">
      <div class="main-container main-container-flex">
        <div class="logo-container">
          <img
            id="header-img"
            src="/img/b89780745f1e81adc10408d92c7c6dda.jpg"
            alt="union logo"
          />
        </div>
        <nav id="nav-bar">
          <ul>
            <li class="nav-link">
              <a href="/idex.html" class="current-page">Home</a>
            </li>
            <li class="nav-link">
              <a href="/idex.html">Product</a>
            </li>
            <li class="nav-link"><a href="/idex.html">Support</a></li>
            <li><a href="/idex.html">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <div class="video-container">
        <iframe
          id="video"
          width="560"
          height="315"
          src="https://www.youtube.com/embed/CQtZRHnbPks"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        ></iframe>
      </div>
      <hr />
      <div class="products-title">
        <h2 class="h2-product-title">OUR BINDINGS</h2>
        <p class="p-product-title">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
          doloremque dicta repellendus, iste unde voluptas.
        </p>
      </div>
      <div class="products">
        <div class="bindings">
          <img
            class="bindings-picture"
            src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
            alt=""
          />
          <p class="binding-name">
            Union Force
          </p>
          <a href="https://www.google.com"><button>MORE INFO</button></a>
        </div>
        <div class="bindings">
          <img
            class="bindings-picture"
            src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
            alt=""
          />
          <p class="binding-name">
            Union Force
          </p>
          <a href="https://www.google.com"><button>MORE INFO</button></a>
        </div>
        <div class="bindings">
          <img
            class="bindings-picture"
            src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
            alt=""
          />
          <p class="binding-name">
            Union Force
          </p>
          <a href="https://www.google.com"><button>MORE INFO</button></a>
        </div>
        <div class="bindings">
          <img
            class="bindings-picture"
            src="https://images-na.ssl-images-amazon.com/images/I/61R7kSDMCVL._AC_SL1500_.jpg"
            alt=""
          />
          <p class="binding-name">
            Union Force
          </p>
          <a href="https://www.google.com"><button>MORE INFO</button></a>
        </div>
      </div>
      <hr />
      <div class="more-stuff">
        <div class="more-stuff-container">
          <img
            class="stuff-picture"
            src="/img/image_home_feature_Softgoods_720x.jpg"
            alt=""
          />
          <p>Lorem, ipsum.</p>
        </div>
        <div class="more-stuff-container">
          <img
            class="stuff-picture"
            src="/img/image_home_feature_Accessories_720x.jpg"
            alt=""
          />
          <p>Lorem, ipsum.</p>
        </div>
        <div class="more-stuff-container">
          <img
            class="stuff-picture"
            src="/img/image_home_feature_3new_720x.jpg"
            alt=""
          />
          <p>Lorem, ipsum.</p>
        </div>
      </div>
      <hr />
    </main>
    <footer>
      <div class="footer-container">
        <div class="copyright-and-contact">
          <p class="copy">&copy;2020 UNION BINDINGS</p>
          <div class="social-media">
            <a href="" class="social-logo"
              ><img class="media-img" src="/img/instagram.png" alt=""
            /></a>
            <a href="" class="social-logo"
              ><img class="media-img" src="/img/facebook.png" alt=""
            /></a>

            <a href="" class="social-logo"
              ><img class="media-img" src="/img/youtube.png" alt=""
            /></a>
          </div>
        </div>

        <div class="newsletter">
          <form
            class="newsletter"
            action=" https://www.freecodecamp.com/email-submit"
            id="form"
          >
            <h3 class="space-newsletter">SUBSCRIBE TO OUR NEWSLETTER</h3>
            <input
              class="space-newsletter"
              type="name"
              name="name"
              id="name"
              placeholder="name"
            />
            <input
              class="space-newsletter"
              class="email-holder"
              type="email"
              id="email"
              placeholder="email"
            />
            <input
              class="space-newsletter"
              id="submit"
              type="submit"
              value="SUBSCRIBE"
            />
          </form>
        </div>
      </div>
    </footer>
  </body>
</html>

and here is the css

/* body and root stuff */
body {
  margin: 0;
  font-size: 0.813rem;
  font-family: "Assistant", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: white;
}
img {
  width: 20%;
}
header {
  text-align: center;
  background: rgb(255, 123, 0);
  color: white;
  padding: 2em auto;
}
/* body and root stuff end */
/* header stuff */
.main-container {
  margin: 0 auto;
  max-width: 900px;
  width: 100%;
}
.main-container-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.logo-container {
  width: 50%;
  height: 50%;
  margin-right: 8em;
  align-self: center;
}
#header-img {
  width: 50%;
  margin-top: 0.75em;
  margin-bottom: 0;
}
nav,
ul {
  list-style-type: none;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
}
.current-page {
  border-bottom: 1px solid white;
}
a {
  text-decoration: none;
  color: white;
  font-weight: 600;
}
a:hover {
  color: orange;
  border-bottom: none;
}

@media (min-width: 675px) {
  .main-container {
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
  }
  .main-container-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .logo-container {
    width: 15%;
    height: 15%;
    align-self: center;
  }
  #header-img {
    width: 100%;
    margin-top: 0.75em;
    margin-bottom: 0;
    padding-bottom: 0.4em;
  }
  nav,
  ul {
    list-style-type: none;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  li {
    color: white;
    margin-left: 2em;
    align-self: center;
  }
  .current-page {
    border-bottom: 1px solid white;
  }
  a {
    text-decoration: none;

    color: white;
    font-weight: 650;
  }
  a:hover {
    color: orange;
    border-bottom: none;
  }
}

/* header stuff ends */
/* main stuff */
main {
  text-align: center;
  background: white;
  padding: 2em auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-container {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
}
#video {
  align-self: center;
}
@media (max-width: 900px) {
  .video-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
  }
  #video {
    width: 100%;
    align-self: center;
  }
}
hr {
  width: 50%;
  margin-top: 2em;
  margin-bottom: 2em;
}
.products-title {
  background: rgb(255, 123, 0);
  color: white;
  max-width: 900px;
  border-radius: 1em;
}
.h2-product-title {
  margin-bottom: 1em;
}
.p-product-title {
  margin-top: 0;
  margin-bottom: 1em;
  margin-left: 1em;
  margin-right: 1em;
}
@media (max-width: 900px) {
  .products-title {
    background: rgb(255, 123, 0);
    color: white;
    max-width: 900px;
    margin-left: 2em;
    margin-right: 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
.products {
  margin-top: 60px;
  max-width: 900px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bindings-picture {
  width: 100%;
}
button {
  background-color: rgb(255, 123, 0);
  border: none;
  border-radius: 0.4em;
  padding: 0.75rem;
  color: white;
  font-weight: 500;
  cursor: pointer;
}
button:hover {
  background-color: rgb(48, 125, 240);
}
.more-stuff {
  max-width: 900px;
  display: flex;
}
.stuff-picture {
  width: 100%;
}
/* main stuff end */
/* footer stuff */

.footer-container {
  background: rgb(255, 123, 0);
  padding: 1%;
  display: flex;
  justify-content: space-between;
}

.newsletter {
  background: rgb(48, 125, 240);
  color: white;
  border-radius: 0.8em;
  padding: 0.3em;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#name {
  border: none;
  border-radius: 0.4em;
}
#email {
  border: none;
  border-radius: 0.4em;
}
#submit {
  background-color: rgb(255, 123, 0);
  border: none;
  border-radius: 0.4em;
  padding: 0.75rem;
  color: white;
  font-weight: 500;
  cursor: pointer;
}
#submit:hover {
  background-color: rgba(255, 139, 30, 0.897);
}
.space-newsletter {
  margin: 1em auto;
}
.copyright-and-contact {
  display: flex;
  color: white;
  font-size: 1.25rem;
}
.copy {
  margin-top: 0;
}
.social-media {
  max-width: 15%;
}
.social-logo {
  width: 100%;
  margin-left: 0.75em;
}
@media (max-width: 900px) {
  .copyright-and-contact {
    display: flex;
    flex-direction: column;
    color: white;
    font-size: 1.25rem;
  }
  .social-media {
    display: flex;
    max-width: 100%;
  }
  .social-logo {
    width: 10%;
    margin-left: 0.2em;
  }
  .media-img {
    width: 100%;
    display: flex;
  }
}

Hi Dittler,

for these challenges it would be helpful to post a live demo (jsfiddle, codepen …) with the test suite.

Test 5: Your links all point to the same html file. What is meant by “taken to the corresponding section” is that the scroll position of the window moves to the mentioned sections … You can achieve this by giving the section element an ID with the name of the section and use the ID as href attribute in the nav-link. (If I remember correctly, the test asks for a specific naming format, mentioned in the fine-print of the failure description.)

try to remove the extra spaces between the quotes

looks like was something with the link itself, because i put a random link and it works

thank you so much, this was the problem hahahaahah was so simple