Positioning of the headers colliding with divs and all-CodePudding

The positioning of the headers is a mess, and it's colliding with divs and all.

Could someone help me revise my code and make it look more neat, and perhaps tell me what's wrong?

I'm still new to HTML and learning.

(function() {
  //If you want to include more images, add the link name and URL of the image in the array list below.
  let images_list = [{
      "url": "photos/headers/Abyheader-2.jpg",
      "name": "name",
      "link": ""
    },
    {
      "url": "https://html-generator.com/uploads/images/2022/04/17/16736YI55GJA_BS.png",
      "name": "name",
      "link": ""
    }
  ];

  let slider_id = document.querySelector("#hcg-slider-1");

  // append all images
  let dots_div = "";
  let images_div = "";
  for (let i = 0; i < images_list.length; i  ) {
    // if no link without href="" tag
    let href = (images_list[i].link == "" ? "" : ' href="'   images_list[i].link   '"');
    images_div  = '<a'   href   ' '   (i === 0 ? ' style="display:block"' : '')   '>'  
      '<img src="'   images_list[i].url   '" alt="'   images_list[i].name   '">'  
      '</a>';
    dots_div  = '<span  data-id="'   i   '"></span>';
  }
  slider_id.querySelector(".hcg-slider-body").innerHTML = images_div;
  slider_id.querySelector(".hcg-slide-dot-control").innerHTML = dots_div;

  let slide_index = 0;

  let images = slider_id.querySelectorAll(".hcg-slides");
  let dots = slider_id.querySelectorAll(".hcg-slide-dot");

  function showSlides() {
    if (slide_index > images.length - 1) {
      slide_index = 0;
    }
    if (slide_index < 0) {
      slide_index = images.length - 1;
    }
    for (let i = 0; i < images.length; i  ) {
      images[i].style.display = "none";
      dots[i].classList.remove("dot-active");
      if (i == slide_index) {
        images[i].style.display = "block";
        dots[i].classList.add("dot-active");
      }
    }
  }

  function dot_click(event) {
    slide_index = event.target.dataset.id;
    showSlides();
  }

  for (let i = 0; i < dots.length; i  ) {
    dots[i].addEventListener("click", dot_click, false);
  }
  setInterval(function() {
    slide_index  ;
    showSlides();
  }, 10000);

})();

@import url('https://fonts.googleapis.com/css2?family=Open Sans&display=swap');
html,
body {
  margin: 0;
  padding: 0;
  height: auto;
  font-family: 'Poppins';
  box-sizing: border-box;
  background-color: rgb(236, 241, 236);
}

.footer {
  margin-top: 150px;
  width: 100%;
  padding-left: 8%;
  padding-right: 18%;
  padding-top: 3%;
  padding-bottom: 3%;
  background-color: #333;
  color: white;
  display: flex;
}

.footer div {
  text-align: left;
}

.col-2 {
  flex-grow: 2;
  width: 70%;
  left: 0%;
}

.footer div h3 {
  font-weight: 300;
  margin-bottom: 30px;
  letter-spacing: 2px;
  font-family: "poppins";
}

form input {
  width: 400px;
  height: 45px;
  border-radius: 4px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px;
  margin-left: 0;
  outline: none;
  border: none;
}

form button {
  background: transparent;
  border: 2px solid white;
  color: white;
  border-radius: 30px;
  margin-left: 2%;
  padding: 10px 30px;
  font-size: 15px;
  cursor: pointer;
}

.col-3 {
  flex-grow: 2;
  word-wrap: break-word;
  word-break: inherit;
  text-transform: uppercase;
  width: 45%;
  margin-right: 50%;
}

.col-3 p {
  font-weight: 300;
  margin-left: 0;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 1px;
  word-break: normal;
  word-wrap: break-word;
  font-family: "poppins";
}

.social-icons {
  margin-left: 110px;
}

.social-icons i {
  font-size: 22px;
  margin: 10px;
  margin-top: 0%;
  cursor: pointer;
}

li,
a {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: black;
  text-decoration: none;
}

body {
  margin-bottom: 0;
  padding: 0;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
}

.navlogo {
  font-size: 1.5rem;
  margin: .5rem;
  margin-left: 80px;
}

.navlogoimage {
  margin-left: 2%;
  position: absolute;
}

.navlinks ul {
  margin: 0px;
  padding: 0px;
  display: flex;
}

.navlinks ul li {
  list-style: none;
}

.navlinks ul li a {
  text-decoration: none;
  color: #fff;
  padding: 1rem;
  display: block;
}

.navlinks ul li a:hover {
  background-color: #555;
}

.ham {
  position: absolute;
  top: .75rem;
  right: 1rem;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
}

.ham .bar {
  height: 3px;
  width: 85%;
  border-radius: 10px;
  background-color: #fff;
}

@media (max-width: 400px) {
  .ham {
    display: flex;
  }
  .navlinks {
    display: none;
    width: 100%;
  }
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .navlinks ul {
    width: 100%;
    flex-direction: column;
  }
  .navlinks ul li {
    text-align: center;
  }
  .navlinks ul li a {
    padding: .8rem 1.5rem;
  }
  .navlinks.active {
    display: flex;
  }
}

.logo {
  top: 7%;
  left: 9%;
  position: absolute;
  width: 400px;
  height: 45px;
}

.logo1 {
  position: absolute;
  align-items: center;
  height: 100px;
  width: 100px;
  top: 3%;
  left: 2%;
}

h1 {
  text-align: center;
  margin-top: 5%;
  margin-bottom: 1%;
  margin-left: 38%;
  width: 23%;
  font-size: 35px;
  text-transform: capitalize;
  font-family: 'Poppins', sans-serif;
}

h2 {
  text-align: center;
  border: green dotted 3px;
  width: 23%;
  font-size: 35px;
  text-transform: capitalize;
  font-family: 'Poppins', sans-serif;
}

p {
  margin-top: 2%;
  margin-left: 20%;
  width: 60%;
  text-align: justify;
  line-height: 2;
  overflow-wrap: break-word;
  white-space: pre-line;
  font-size: 22px;
}

p {
  margin-left: 8%;
  margin-top: 2%;
  margin-bottom: 0%;
  word-wrap: break-word;
  word-break: break-all;
  font-size: 20px;
  width: 70%;
  word-break: break-all;
}

section {
  background-color: #333;
  margin-top: 0%;
}

h3 {
  font-family: sans-serif;
  font-weight: 300;
}

.img-fluid {
  max-width: 100%;
  width: 100%;
  display: block;
  height: auto;
  background-color: rgb(214, 214, 214);
  border: #bbb 10px;
  border-style: solid;
}

.img-fluid:hover {
  -webkit-transition-delay: 0.1s;
  transition: ease-in-out;
}

.img-fluid {
  max-width: 100%;
  width: 100%;
  display: block;
  height: auto;
}

.container {
  margin-top: 0%;
  max-width: 1200px;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
  background-color: green;
}

.container .product {
  flex: 0 0 50%;
  padding: 0 1rem;
}

.container .product .bg-1 {
  background-color: white;
  height: 100%;
}

.container .product .bg-1:hover {
  transition: ease-in-out 0.5s;
  transform: translateY(-0.5rem) scale(1.0125);
  box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
}

.container .product .bg-2 {
  background-color: white;
  height: 100%;
}

.container .product .bg-2:hover {
  transition: ease-in-out 0.5s;
  transform: translateY(-0.5rem) scale(1.0125);
  box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
}

.container .product h1 {
  font-size: 1rem;
  padding: 0.5rem 1rem .1rem 0;
  border-bottom: 2px solid brown;
  display: inline-block;
  margin: 0 0 .5rem .5rem;
  text-transform: uppercase;
}

.container .product p {
  font-size: 1rem;
  padding: 0 1rem 0.5rem 0.5rem
}

.slider-wrapper h2 {
  margin: 0;
}

.slider-wrapper {
  margin-top: 3%;
  margin-left: 0%;
  padding-left: 44%;
  width: 100%;
  background-color: red;
}

.div-left {
  background-color: rgb(185, 168, 168);
  width: 30%;
  height: 450px;
  float: left;
  margin-left: 15%;
  margin-top: 0%;
}

.div-left h1 {
  font-size: 20px;
  width: 100%;
  margin-left: 0;
  margin-top: 0%;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
}

.div-left img {
  width: 150px;
  height: 150px;
  display: block;
  margin-top: 10%;
  margin-left: 35%;
}

.div-left p {
  font-size: 15px;
  width: 90%;
  margin-left: 5%;
  margin-top: 0%;
  display: flex;
  word-wrap: break-word;
  word-break: normal;
  text-align: left;
}

.div-left:hover {
  transition: ease-in-out 0.5s;
  transform: translateY(-0.5rem) scale(1.0125);
  box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
}

.submit {
  color: #000000;
  font-size: 19px;
  border: 3px solid #000000;
  padding: 15px 50px;
  margin-left: 33%;
  margin-top: 10%;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transform: scale(1.0);
  transition: ease-in-out 0.5s;
}

.submit:hover {
  transform: scale(0.9);
  transition: ease-in-out 0.5s;
}

.div-right {
  background-color: rgb(217, 214, 214);
  float: right;
  margin-right: 15%;
  margin-top: 0%;
  width: 30%;
  height: 450px;
}

.div-right img {
  object-fit: cover;
  width: 100%;
  height: 360px;
  scale: 1;
}

.div-right:hover {
  transition: ease-in-out 0.5s;
  transform: translateY(-0.5rem) scale(1.0125);
  box-shadow: 0 0.5em 3rem -1rem rgba(0, 0, 0, 0.5);
}

.div-right h1 {
  font-size: 20px;
  width: 100%;
  margin-left: 0;
  margin-top: 4%;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
}

.div-right p {
  font-size: 24px;
  width: 100%;
  margin-left: 1%;
  margin-top: -2%;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  text-transform: uppercase;
  display: flex;
}

.available-now {
  background-color: rgb(188, 79, 28);
  width: 100%;
  height: 100%;
}

.available-now-title h1 {
  margin: 0;
}

.our-founder-title {
  margin: 0;
  background-color: green;
}

.our-founder-title h1 {
  margin: 0;
  background-color: red;
}

.english {
  width: 70%;
  height: 10%;
  margin-left: 15%;
  margin-top: 0%;
  background-color: rgb(200, 195, 195);
}

.english span {
  font-family: 'poppins';
  text-transform: uppercase;
  margin-top: 4%;
  margin-bottom: 0%;
  margin-left: 0%;
  float: left;
  display: block;
  font-size: 30px;
}

.english p {
  font-family: 'poppins';
  margin-top: 2%;
  font-size: 20px;
  width: 60%;
  word-wrap: break-word;
  word-break: inherit;
  float: left;
  margin-left: 2%;
  line-height: 200%;
}

.english img {
  width: 300px;
  height: 450px;
  margin-left: 6%;
  margin-top: 10%;
  float: left;
  display: block;
}

.next {
  margin-top: 5%;
  margin-left: 45%;
  float: left;
  width: 20%;
  color: #000000;
  font-size: 19px;
  border: 3px solid #000000;
  background-color: transparent;
  padding: 15px 50px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transform: scale(1.0);
  transition: ease-in-out 0.5s;
}

.next:hover {
  transform: scale(0.9);
  background-color: black;
  color: white;
  transition: ease-in-out 0.2s;
}

.showmore {
  width: 100%;
  height: 50%;
  background: red dotted 5px;
}

.showmore:hover {
  transform: scale(0.9);
  background-color: black;
  color: white;
  transition: ease-in-out 0.2s;
}

.hindi {
  width: 70%;
  height: 10%;
  margin-left: 15%;
  margin-top: 0%;
  background-color: rgb(200, 195, 195);
}

.hindi span {
  font-family: 'poppins';
  text-transform: uppercase;
  margin-top: 4%;
  margin-bottom: 0%;
  margin-left: 0%;
  float: left;
  display: block;
  font-size: 30px;
}

.hindi p {
  font-family: 'poppins';
  margin-top: 2%;
  font-size: 20px;
  width: 60%;
  word-wrap: break-word;
  word-break: inherit;
  float: left;
  margin-left: 2%;
  line-height: 200%;
}

.hindi img {
  width: 300px;
  height: 450px;
  margin-left: 6%;
  margin-top: 10%;
  float: left;
  display: block;
}

.first-container-header {
  margin-top: 0%;
  margin-bottom: 2%;
  margin-left: 0%;
  width: 100%;
}

.first-container-header h1 {
  margin-top: 5%;
  margin-left: 0%;
  width: 100%;
  height: 100%;
}

.second-container-header {
  margin-top: 30%;
  margin-left: 0%;
  width: 100%;
}

.second-container-header h1 {
  margin-top: 0%;
  margin-left: 0%;
  width: 100%;
  /*FEATURED*/
}

.featured-cover {
  float: left;
  padding-top: 30%;
  width: 50%;
  height: 50%;
  background-color: rgb(0, 255, 30);
}

.featured-description {
  float: right;
  padding-top: 30%;
  border: red dotted 5px;
  width: 50%;
  height: 50%;
  background-color: red;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Localhost</title>
  <meta name="Author" content="Noble Fallen">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="carousel.css">
  <link rel="stylesheet" href="header.css">
  <link rel="stylesheet" href="authors.css">
  <script src="https://kit.fontawesome.com/194918e54c.js" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


</head>

<body>

  <header>
    <img  src="photos/ae-logo-black.png" alt="logo">
    <img  src="photos/ae_logo.png">

    <nav >
      <!-- The nav logo part -->
      <div ><img src="photos/title.png" width="450px">
      </div>
      <div ><img src="photos/ae_logo.png" width="100px">
      </div>

      <!-- The hamburger menu -->
      <a href="#" >
        <span ></span>
        <span ></span>
        <span ></span>
      </a>
      <!-- The nav links part -->
      <div >
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contacts</a></li>
        </ul>
      </div>
    </nav>
    <!--     <script src="js/index.js"></script> -->
  </header>

  <section>
    <div id="hcg-slider-1" >
      <div >
        <div >
          <a  style="display:block">
            <span >1/5</span>
            <img src="Abyheader-2.jpg" alt="name">
            <span >name</span>
          </a>
        </div>
      </div>
      <div ></div>
    </div>



  </section>


  </div>
  <div ></div>
  <div ></div>






  <div >
    <h1>WELCOME</h1>
  </div>

  <div >
    <img src="photos/ae_logo.png">
    <h1>We Are Accepting Submissions!</h1>
    <p>Aesthetic Press welcomes unsolicited submissions from published and unpublished authors and diverse authors.</p>
    <button  name="submit">Submit</button>
  </div>

  <div >
    <img src="photos/headshot/ivana-headshot.webp" alt="" srcset="">
    <h1>OUR Founder</h1>
    <p>IVANA SANDERS </p>
  </div>


  <div >
    <h1>WELCOME</h1>
  </div>

  <div >
    <div >
      <div >
        <a href="">
          <img  src="photos/News/upcoming.png" alt="" /></a>
        <h1>OUT NOW!</h1>
        <p>Need a good thriller for this summer? Check out our latest novels!</p>
      </div>
    </div>

    <div >
      <div >
        <a href="">
          <img  src="photos/News/Interview.png" alt="" /></a>
        <h1>LATEST INTERVIEW</h1>
        <p>Our Authors were interviewed by The WCCS!</p>
      </div>
    </div>
  </div>






  <div >
    <div >
      <h3>NEWSLETTER</h3>
      <form>
        <input type="email" placeholder="Your Email Adress" required>
        <button type="submit">SUBSCRIBE NOW</button>
      </form>
    </div>
    <div >
      <h3>CONTACT</h3>
      <p>Follow us on Social Media</p>
      <div >
        <i ></i>
        <i ></i>
        <i ></i>
      </div>
    </div>
  </div>

</body>

</html>

CodePudding user response：

The mistake was in the CSS. It has been resolved by using position absolute and relative. I also had trouble with closing tags, which I fixed, so it did not make any of the elements collide with each other.

So the answer is to position absolute.