Html/css - section (h2) appearing in header

HTML-CSS
#1

Hi, My section is appearing in my header. I don’t think this is normal and i’m not sure why its happening?

I’ve typed a h2 in my section and its above my header currently.

Any advise is appreciated. I’ve attached the code below:

HTML:


<div id="header-logo">
  <header>
    <img id="header-img"src="https://i.ibb.co/hX0YZkj/Six-paws-2.png" alt="six-paws-logo" />
  
    <h1> Six Paws.</h1>
    <p class="p-description"> Dog training school</p>
    </div>
  
    <nav id="nav-bar">
      <ul>
        <li ><a class="nav-link" href="features"> Features</a></li>
        <li><a class="nav-link" href=" #howitworks"> How it works</a><li>
        <li><a class="nav-link" href="#pricing"> Pricing</a><li>
        </li>
      </ul>
    </nav>
  
  </header>

  <div class="container">
    <section>
      <h2>Making them learn with love.</h2>
    </section>
  </div>

CSS:

/**header css**/
#header-img{
  width:auto;
  height:100px;
  margin:auto;
  float:left;
}
h1{
  padding-top:20px;
  padding-left:15px;
  float:left;
  position:inline;
  color:#BD5E24;
}

.p-description{
  padding-top:40px;
  padding-left: 5px;
 float:left;
  position:inline;
  color:#BD5E24;
}
/** not background color???? **/

#header-logo {
 
  }

ul{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  float:right;
  padding-top:53px;
  padding-right:10px;
  font-size:1.2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

li{
  
  float:right;
  position:inline;
}
li a{
  
  color:#BD5E24; 
  text-align:right;
  padding:14px 16px;
  text-decoration:none;
}
li a:hover{
  color:#FF6100;
}

header{
  width:100%;
  height:100%;
  position:fixed;
  justify-content: space-around;
  }

  .container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
#2

Your list items are not correctly coded. You aren’t closing all of the list items , just the first one and there is a dangling closing list tag. Because they aren’t paired properly the browser will most likely behave unperdictably.

#3

Thanks for that. I changed it and its still appearing at the top.

#4

check the matching tag pairs always and the browsers developer tools are essential for debugging website functionality.

image

you can navigate through your layers and figure out where your tags are getting confused.

CSS can also alter aspects of your html so you must check all sources you use. You can also use comments to isolate areas of your code too