The horizontal navigation bar clips on the "h2" element and I want under it

I just started coding after a while so I tried the one's in w3schools and it worked after I put lorem ipsum paragraph to fill it in. It first moved the h3 next to the navigation bar, then its over the navigation bar. and it doesn't have its space.

Then I used some codes from other websites and no luck

h2{
    position: relative;
    text-align: center;
    letter-spacing: 5px;
    word-spacing: 5px;
    font-size: 40px;
    font-family: Header;
}


nav{
    position: absolute;
    display: inline-block;
    list-style: none;
    
}

ol,
ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
h1 {
  padding: 13px;
}
#horBar {
  margin: 11px;
  font-family: Serif;
  width: 1000px;
}

#horBar li {
  display: block;
  width: 117px;
  float: left;
  margin-left: 4px;
  border: 2px double rgb(82, 20, 20);
}

#horBar a {
  color: #006;
  background-color: rgb(255, 255, 255);
  text-decoration: none;
  padding: 4px;
  display: block;
}

#horBar a:hover {
  color: rgb(237, 124, 124);
  background-color: #006;
}

   <nav>
      <ul id="horBar">
        <li><a href="home.html">Home</a></li>
        <li><a href="customer.html">Customer</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="orders.html">Orders</a></li>
        <li><a href="reports.html">Reports</a></li>
        <li><a href="administrations.html">Administrations</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>`

Solution

I am not sure if this is what you mean. because your navigation is on absolute position it is separated from everything.if you position your navigation as relative then that should automatically be part of everything, or else you can put a margin on your body to position it absolute then if you want to stretch it since it is in absolute you need to move it around using left right and top. Let me know if this is what you mean.

h2{
    position: relative;
    text-align: center;
    letter-spacing: 5px;
    word-spacing: 5px;
    font-size: 40px;
    font-family: Header;
}


nav{
    position: relative;
    display: inline-block;
    list-style: none;
   
    
}

ol,
ul {
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
h1 {
  padding: 13px;
}
#horBar {
  margin: 11px;
  font-family: Serif;
  width: 1000px;
}

#horBar li {
  display: block;
  width: 117px;
  float: left;
  margin-left: 4px;
  border: 2px double rgb(82, 20, 20);
}

#horBar a {
  color: #006;
  background-color: rgb(255, 255, 255);
  text-decoration: none;
  padding: 4px;
  display: block;
}

#horBar a:hover {
  color: rgb(237, 124, 124);
  background-color: #006;
}

<nav>
      <ul id="horBar">
        <li><a href="home.html">Home</a></li>
        <li><a href="customer.html">Customer</a></li>
        <li><a href="products.html">Products</a></li>
        <li><a href="orders.html">Orders</a></li>
        <li><a href="reports.html">Reports</a></li>
        <li><a href="administrations.html">Administrations</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
    
    <body> <h2> Future about cars </h2> <h3>What is a future car?</h3> <p>"Lorem ipsum paragraphs"</p> </body>