Help#product landing

Curriculum Help
,
1

Hi! can you help me to replace (Features, How it works and Products) top right of the page? Possibly same line with logo. Here goes below the error
#nav-bar is not a child of #header : expected 0 to equal 1
AssertionError: #nav-bar is not a child of #header : expected 0 to equal 1

Thanks.

Screen Shot 2021-07-19 at 12.37.20 AM
Screen Shot 2021-07-19 at 12.37.20 AM1175Ă—455 26.3 KB

/*HTML*/
<header>
        <div id="page-wrapper">
          <div id="header" 
            <div class="logo">
           <img 
             id="header-img"
         
 src="https://i.ibb.co/rG7HNYY/14720397-1255408064480005-7131699276933650470-n.png"       alt="Logo" 
         
         />

       </div>
<nav id="nav-bar"> 
  <ul>
    <li><a class="nav-link" href="#features">Features</a></li>
    <li><a class="nav-link" 
href="#how-it-works">How It Works<a/></li>
       <li><a class="nav-link" href="#pricing">Products</a></li>
      </ul>
 </nav>
</header>


/*CSS*/

header {
  position: fixed;
  top: 0;
  min-height: 100px;
  padding: 3px 5px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}
2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

For projects, it is always better to share your codepen link so we can see the error messages for ourselves.

But just taking a quick glance at your html, you have a few errors in your html.
I would address those first.

4 
<p>Here goes below the link</p>

https://codepen.io/koushikdey/pen/xxdrGLW

5

You still have some issues in your html that you need to clean up.

Once you fix those errors then you will need to remove a few things from your header.

I would remove the following.

  float: left;
  padding-left: 40px;
  width: 20%;

Then I would make sure the display is set to flex since you are using flex properties like justify-content and align-items.

But there is a bigger issue that needs addressing.

I noticed that your project looks similar to the FCC example.
So I compared the two project codes and yours is almost identical.
Remember that you are supposed to build your own project.
Not use code from the sample.

I know it is hard to build your own projects.
I remember spending a lot of time on these projects when I was first learning over a year ago.
But the whole point is to build your own projects with your own code.
That is the only way you are going to learn how to code.

I would make some serious changes because right now you are violating the academic honesty code.

Hope that helps!

7

Hi! thank you for your advice. I thought the coding style should be similar to the FCC sample page according to the instruction. So I read the FCC’s instruction again and finally, able to got your point. After reading your text I have realised my faults that I should complete the project in my own style of coding. Have a nice day!