Build a Product Landing Page Problem

Tell us what’s happening:

I can’t fix these two errors:

When I Click A .Nav-Link Button In The Nav Element, I Am Taken To The Corresponding Section Of The Landing Page.’

My Product Landing Page Should Have At Least One Media Query.

Your code so far

Your browser information:

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

Link to the challenge:

I have the same two tests failing, even though I can see the correct code in my HTML. I submitted a bug report, not sure what else to do…

this is mine:

All you can do is wait for someone to help you. Should take no longer than a couple of days.

Its because your first href link which is “domains-we-build-apps-for” is not an #id you have on you page.

The id you have is “Domains we build apps for”

Also on the id you have a # in front of the name which needed to be removed.

Here is the correct code and should work.

           <li><a class="nav-link" href="#domains-we-build-web-apps-for">Domains we build web apps for</a></li>
           <li><a class="nav-link" href="#testimonial">Testimonial</a></li>
           <li><a class="nav-link" href="#services">Services</a></li>
<div class="container">


<section id="hero">
  <h2>Building custom web applications to suite your needs </h2>
  <form id="form" action="">
    <input name="email" id="email" type="email" placeholder="Enter your email address" required/>
    <input id="submit" type="submit" value="Get Started" class="btn"></input>

<div class="container">
<section id="domains-we-build-web-apps-for">

The issue with yours was you had two class elements, they had to be combined into only one.

Here is the correct code

  <nav class="my-2 my-md-0 mr-md-3" id="nav-bar">
    <a class="nav-link p-2 text-dark" href="#features-header">Features</a>
    <a class="nav-link p-2 text-dark" href="#pricing-header">Pricing</a>
    <a class="nav-link p-2 text-dark" href="#singup-header">Sign up</a>

Well now I feel dumb. Thanks for finding that!

1 Like

Thanks for helping me solve one of the issues, but I still need to figure out why it says I need at least one Media Query when I do in fact have one.

Okay, bro, here’s what you need to fix:

  • Your header now covers the content because it has a fixed position.

  • Media query doesn’t work because you didn’t set it properly.

These two are the main bugs I can think of at a glimpse. Good luck!

You have your media querys written wrong. They need to include the id or class in them.

I fixed the last one for you, which made you pass the test, but you still have to fix all of the other ones.

Here is the solution

  ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;

   @media (max-width: 650px) {
     #ul {
       flex-direction: column;

Thanks for helping me

i faced similar issue as the OP. thanks for guide

i too have the same problem which i cant even know where to start please i need help


Go head and create a new post with your code. Preferably share it with codepen.

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

do you have a link to codepen?