My a tag isnt jumping to specific part of page

Question

I am new to coding and I am currently doing the product landing page project on FreeCodeCamp and I cannot figure out why my a tags are not jumping to a specific part of the page that I am trying to direct it to.

Here is a snippet of the HTML code of the list items on the page

@import 'https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap';
#header-img {
  height: 70px;
  padding-left: 15px;
  padding-top: 10px;
  filter: drop-shadow(0 0 0.75rem green);
}

#nav-bar {
  font-family: 'Balsamiq Sans', sans-serif;
  display: inline;
  float: right;
  padding-bottom: 100px;
  padding-right: 40px;
  margin: -15px;
}

li {
  list-style: none;
  display: inline;
  margin: 40px;
  text-align: center;
}

a {
  color: #000000;
  text-decoration: none;
}

p {
  font-family: 'Yanone Kaffeesatz';
  font-size: 33px;
  text-align: left;
  padding-left: 120px;
  margin: -33px;
  opacity: 90%;
}

h1 {
  font-family: 'Balsamiq Sans';
  font-size: 60px;
  text-align: center;
  padding-top: 120px;
  padding-right: 650px;
}

.body-img {
  height: 500px;
  position: relative;
  top: -345px;
  float: right;
}

h2 {
  font-family: 'Balsamiq Sans', sans-serif;
  text-align: center;
  font-size: 20px;
  position: relative;
  bottom: 30px;
}

<div id="page-wrapper">
  <header id="header">
    <div class="logo">
      <img id="header-img" alt="Calming Corner logo" src="https://image.flaticon.com/icons/png/512/1491/1491200.png"></div>
    <p> Calming Corner</p>
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#Benefits">Benefits</a></li>
        <li><a class="nav-link" href="#Features">Features</a></li>
        <li><a class="nav-link" href="#Pricing">Pricing</a></li>
    </nav>
    </ul>
  </header>


  <section id="title">
    <h1>Brilliant things<br> happen in a calm mind...</h1>
    <div class="description">
      <img id="body-img" class="body-img" src="https://i.pinimg.com/originals/14/04/bc/1404bc0062d9528d6af29e699a4b6fc2.gif">
      <h2> Remember the illuminating sun... <br>it may, at times, be obscured by clouds, but it is always there.</h2>
    </div>

    <div class="container">
      <section id="Benefits">

        <h3> Meditation exercises for all ages</h3>
        <p> After choosing a subscription plan you will receive access to 100s of mindfulness exercises geared towards all age groups and other features based on the subscription plan that you choose.</p>
    </div>

I have no clue why it isnt working, I've tried many things throughout other threads asking the same question but it could be an issue specific to parts of my code that may be interfering. But I am not entirely sure. Any guidance would be appreciated!

Answer 1

There are several things going wrong here.

The first one being not closing your <section> tags. a <section> tag should always be closed!

<section>
  <p>Test</p>
</section>

The second one is that you are nesting your html elements in the wrong way. In the code you provided, you where opening a <div> tag before your <section> tag and closing it after your <section> tag. This is not valid and can lead to your code breaking down!

<section>
  <div>
    <p>Test</p>
  </div>
</section>

The last one is closing your <ul> tag after closing your <nav> tag. Like i said, this is not valid and can lead to your code not working as expected!

<nav>
 <ul>
   <li><a>Test</a></li>
 </ul>
</nav>

The snippet below has a working example. pressing the Benefits button should redirect you to the Benefits section.

@import 'https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@500&display=swap';
#header-img {
  height: 70px;
  padding-left: 15px;
  padding-top: 10px;
  filter: drop-shadow(0 0 0.75rem green);
}

#nav-bar {
  font-family: 'Balsamiq Sans', sans-serif;
  display: inline;
  float: right;
  padding-bottom: 100px;
  padding-right: 40px;
  margin: -15px;
  text-align: center;
}

li {
  list-style: none;
  display: inline;
  margin: 30px;
  text-align: center;
}

a {
  color: #000000;
  text-decoration: none;
}

p {
  font-family: 'Yanone Kaffeesatz';
  font-size: 20px;
  text-align: left;
  padding-left: 120px;
  margin: -33px;
  opacity: 90%;
}

h1 {
  font-family: 'Balsamiq Sans';
  font-size: 60px;
  text-align: center;
  padding-top: 120px;
  padding-right: 650px;
}

.body-img {
  height: 500px;
  position: relative;
  top: -345px;
  float: right;
}

h2 {
  font-family: 'Balsamiq Sans', sans-serif;
  text-align: center;
  font-size: 20px;
  position: relative;
  bottom: 30px;
}
h3{
   position: relative;
   bottom: 30px;
}
.container{
 text-align: center;
}

<div id="page-wrapper">
  <header id="header">
    <div class="logo">
      <img id="header-img" alt="Calming Corner logo" src="https://image.flaticon.com/icons/png/512/1491/1491200.png"></div>
    <p class="logo">Calming Corner</p>
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#Benefits">Benefits</a></li>
        <li><a class="nav-link" href="#Features">Features</a></li>
        <li><a class="nav-link" href="#Pricing">Pricing</a></li>
       </ul>
    </nav>
  </header>


  <section id="title">
    <h1>Brilliant things<br> happen in a calm mind...</h1>
    <div class="description">
      <img id="body-img" class="body-img" src="https://i.pinimg.com/originals/14/04/bc/1404bc0062d9528d6af29e699a4b6fc2.gif">
      <h2> Remember the illuminating sun... <br>it may, at times, be obscured by clouds, but it is always there.</h2>
    </div>

    <section id="Benefits">
     <div class="container">
        <h3> Meditation exercises for all ages</h3>
        <p> After choosing a subscription plan you will receive access to 100s          of mindfulness exercises geared towards all age groups and other              features based on the subscription plan that you choose.</p>
       </div>
    </section>
   </section>