Build a Product Landing Page-HELP

Build a Product Landing Page-HELP
0

#1

Tell us what’s happening:

Hello,
This is my link for my Codepen: https://codepen.io/gq-x/pen/dqvwKZ
I did all that has been asked of me in this project, however, when I ran the test it asked for the following:
that the nav bar should always be there even if the user scrolled, I add a fixed position in the element with the id=“nav-bar”, yet it did not count.
second, it asked me to add at least one media query and I added two, and yet it wasn’t counted.

Help please in guide me what am I doing wrong?
Thanks in advance.

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/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/


#2

You need to add

top: 0px;

To get it to stick to the top of the page


#3

@sipofwater told you how to pass the tests, but now you can not see the nav bar.

Also, you need to fix some other CSS syntax issues. You are not creating media queries. They are not supposed to be nested in the main selectors.

For example, instead of:

.logo{
  width: 120px;
  height: 120px;
  @media (max-width: 500px) {
  width:100px;
  margin: 10px;
  padding: 5px;
  }
}

It should be:

.logo{
  width: 120px;
  height: 120px;
}

@media (max-width: 500px) {
  .logo {
    width:100px;
    margin: 10px;
    padding: 5px;
  }
}

Also, you have a typo in the following line of your #features selector:

justify-conetnt: space-around;

#4

I added it.
but still gives me an error about the #header being top.
and i fixed the media query thanks for both of you.

This is my code:

#header{
  top: 0;
  position: fixed;
  padding: 0px 30px;
  margin-top: 20px;
}

#5

(You can add box-shadow: 2px 2px 5px black; to the header to help separate it from the page better).