Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element’s id. e.g. #footer ).
Above is the question I am stuck on.
Ive tried to change link href value with #, no #, // on each side of the value, added stuff, took out stuff, im stuck and I really need some type of hint whatever.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head><meta charset="UTF-8">
  <link href="styles.css" rel="stylesheet">
  <header id="header"><img id="header-img" src="https://www.webdesignfact.com/wp-content/uploads/2011/09/sexy-logo-design-15-300x240.jpg"> 
 <nav id="nav-bar">
  <fieldset><a href="About" class="nav-link"><Link to="About" >About</link></a></fieldset>

<fieldset><a href="products" class="nav-link"><Link to="Products">Products</link></a></fieldset>  

<fieldset><a href="Pricing" class="nav-link"><Link to="Pricing" >Pricing</link></a></fieldset>
</nav>
</header>
  </head>

  <body>
    <h1>Get Updates on New Content
    </h1>
    <form id="form" for="email" action="https://www.freecodecamp.com/email-submit"></label>
<input type="email" id="email" name="email" placeholder="Enter Email Here">
<input id="submit" type="submit" ></input>
</form>
<a id="About" name="About">
<p1 id="About" >About Section
  bkdsbckb
  bjdbk
  dnclnd
  nncbcowbcwebcogbiebqbdqvbidwqvidbvqwodbqwovdiqvdyiq
  vdqgbyidgvqiy2vdqwbdgbdiqgwfidvqwvdbko
</p1>
</a>
<a id="Products" name="Products" >
<p2 id="Products" ><iframe id="video" width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe>
</p2>
</a>
<a  id="Pricing" name="Pricing" >
<p3 id="Pricing" >Pricing</p3>
</a>
    </body>
/* file: styles.css */
header{display:flex;
;}

fieldset{
border:0;
  display: inline;
}
nav{text-align:right;
position: fixed;
    top: 0px;
    width: 100%;
}
img{width:50%%;
max-width:100px;
height:75px;
margin:0;}
h1{text-align:center;}
input{align-items:center;}
@media screen and (max-width: 600px) {
  div {
    display: none;
  }
}
.about{display:flex;}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

Why do you have <fieldset> and <link> elements here?
All you need is text enclosed in anchor elements, which you will have if you remove these unnecessary elements.

Your href attributes for the anchor tags should point to another element elsewhere on the page which has a matching id attribute. The href attribute value should take the form #idOfTargetElement.

When the user clicks on the text of the .nav-link element, they will be directed to the element with the corresponding id.

Also, further down the page, I notice you have elements like this:

You don’t need these anchor elements, and besides that, id attributes must be unique to single element in your HTML document.

In summary, here’s an example of how to create a clickable .nav-link element which directs the user to an element elsewhere on the page:

<nav>
<a class="nav-link" href="#about">About</a>
...
</nav>
...
<section id="about">Some Content</section>