Div element for new section hidden behind container

Question

I'm fairly new to HTML and still learning and now I'm stuck with something:

I finished making an image carousel and I cannot add a second container under the carousel (its own section). The second container is hiding behind the first one.

html, body {
  background-color: rgba(206, 199, 199, 0.458);
  height: 200%;
  position:static;
  font-family: sans-serif; 
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

header {
  position: absolute;
  border: rgb(22, 19, 19) dotted 2px;
  
}

.logo {
  position:absolute;
  width: 130px;
  height: 130px;
  top: 7px;
  left: 1%;
}

.logo2 {
  position:absolute;
  width: 550px;
  height: 120px;
  outline-style:groove;
  outline-width: 3px;
  outline-offset: -20px;
  top: 10%;

  left:9%;   
}

h1 {
  position:absolute;
  text-align: center;
  text-decoration:none;
  font-family: 'Times New Roman', Times, serif;
  font-size: 70px;
  text-transform: capitalize;
  text-shadow: red 400%;
  left: 450px;
  top: 240px;
  border: rgb(37, 56, 184) dotted 3px;
}
 
#container{
  background-color: rgb(253, 250, 250);
  height: 20%;
  width:  100%;
  position:absolute;
  left: 0%;
  
}
   
#main-menu .nav-bar { 
  position:absolute;
  list-style:none; 
  top: 50px;
  left: 95vh;
}

#main-menu .nav-bar li { 
  display:inline-block; 
  padding-right: 30px;
}

#main-menu .nav-bar li a {
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #ccc;
  font-size: 18px;
  color: black;
  background: transparent;
  transition: 0.2s 0s;
  display: inline-block;
}

#main-menu .nav-bar li a:hover{ 
  cursor: pointer;
  transform: scale(1.25);
}

Main#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 5;
  --middle: 3;
  --position: 1;
  pointer-events:none;
  top: 800px;
  border: red dotted 5px;
}


body {
  height: 200px;
  margin: 0;
  display: grid;
  grid-template-rows: 940px 100px;
  grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
  align-items: center;
  justify-items: center;
  border: rgb(56, 169, 44) dotted 5px;
}
  
div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: coral;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r)))
  translateX(calc(-250px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}
  
div.item:nth-of-type(1) {
  --offset: 1;
  background-image: url(photos/Alluredbyyou.jpg);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center; 
}

div.item:nth-of-type(2) {
  --offset: 2;
  background-image: url(photos/Notyourmarrysue.jpg);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

div.item:nth-of-type(3) {
  --offset: 3;
  background-image: url(photos/thewolf.png);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

div.item:nth-of-type(4) {
  --offset: 4;
  background-image: url(photos/adreamof.jpg);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

div.item:nth-of-type(5) {
  --offset: 5;
  background-image: url(photos/EJ.png);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

input:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  cursor: pointer;
  transform: scale(1.25);
}

input:nth-of-type(1):checked ~ main#carousel{
  --position: 1;
}
  
input:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
  --position: 2;
}

input:nth-of-type(3) {
  grid-column: 4 /5;
  grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
  --position: 3;
}

input:nth-of-type(4) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
  --position: 4;
}

input:nth-of-type(5) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
  --position: 5;
}
 

<!DOCTYPE html>
 <html>
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="photos/ae_logo.png">
   <link rel="stylesheet" type="text/css" href="style.css">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
 <body>
 <div id="container">
<img class="logo2"  src="photos/title.png" alt="" srcset="">
<img class="logo"  src="photos/ae_logo.png" alt="" srcset="">

<h1>NEW RELEASES</h1>

<nav id="main-menu">
  <ul class="nav-bar">
    <li class="nav-button-home"><a href="#">Home</a></li>
    <li class="nav-button-books"><a href="#">Books</a></li>
    <li class="nav-button-authors"><a href="#">Authors</a></li>
    <li class="nav-button-submissions"><a href="#">Submissions</a></li>
    <li class="nav-button-contact"><a href="#">Contact US</a></li>
  </ul>
</nav>
         

  </div> 
  
  
  
  <main id="carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
  </main>
  </body>

  <main>
  
    <div class="container">
      <div class="box">
        <div class="photo"></div>
        <div class="content">
          <h3>Heading</h3>
          <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
      </div>
    </div>


  </main>
 </div>
   </div>
  </div>
 </div>
</body>
</html>

Answer 1

I think I could fix your code and achieve what you are looking for, after I have fixed the indentation in your example.

Indenting your code is important

Indentation of elements is needed to understand what's going on. Maybe the site screwed up your indentation. If not, try to indent any nested elements properly in the future. Learn more on why indentation is important.

What I have done

• I have removed some extra closing tags, for example </body> tag and some </div> tags.
• I have changed the absolute positioned elements h1 and carousel to relatively positioned elements to let your layout "flow".

Learn more on when absolute positioned elements are useful. I have exchanged their fixed positioning with margin (top/rightbottom/left/) - I love this "trouble" mnemonic :)

Code to get the result above

html, body {
  background-color: rgba(206, 199, 199, 0.458);
  height: 200%;
  position:static;
  font-family: sans-serif; 
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

header {
  position: absolute;
  border: rgb(22, 19, 19) dotted 2px;
  
}

.logo {
  position:absolute;
  width: 130px;
  height: 130px;
  top: 7px;
  left: 1%;
}

.logo2 {
  position:absolute;
  width: 550px;
  height: 120px;
  outline-style:groove;
  outline-width: 3px;
  outline-offset: -20px;
  top: 10%;

  left:9%;   
}

h1 {
  position:relative;
  text-align: center;
  text-decoration:none;
  font-family: 'Times New Roman', Times, serif;
  font-size: 70px;
  text-transform: capitalize;
  text-shadow: red 400%;
  margin: 200px 0 200px 0;
  border: rgb(37, 56, 184) dotted 3px;
}
 
#container{
  background-color: rgb(253, 250, 250);
  height: 20%;
  width:  100%;
  position:absolute;
  left: 0%;
}
   
#main-menu .nav-bar { 
  position:absolute;
  list-style:none; 
  top: 50px;
  left: 95vh;
}

#main-menu .nav-bar li { 
  display:inline-block; 
  padding-right: 30px;
}

#main-menu .nav-bar li a {
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #ccc;
  font-size: 18px;
  color: black;
  background: transparent;
  transition: 0.2s 0s;
  display: inline-block;
}

#main-menu .nav-bar li a:hover{
  cursor: pointer;
  transform: scale(1.25);
}

Main#carousel {
  grid-row: 1 / 2;
  grid-column: 1 / 8;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 600px;
  --items: 5;
  --middle: 3;
  --position: 1;
  pointer-events:none;
  margin-top: 300px;
  border: red dotted 5px;
}

body {
  height: 200px;
  margin: 0;
  display: grid;
  grid-template-rows: 940px 100px;
  grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
  align-items: center;
  justify-items: center;
  border: rgb(56, 169, 44) dotted 5px;
}
  
div.item {
  position: absolute;
  width: 300px;
  height: 400px;
  background-color: coral;
  --r: calc(var(--position) - var(--offset));
  --abs: max(calc(var(--r) * -1), var(--r));
  transition: all 0.25s linear;
  transform: rotateY(calc(-10deg * var(--r)))
  translateX(calc(-250px * var(--r)));
  z-index: calc((var(--position) - var(--abs)));
}
  
div.item:nth-of-type(1) {
  --offset: 1;
  background-image: url(photos/Alluredbyyou.jpg);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center; 
}

div.item:nth-of-type(2) {
  --offset: 2;
  background-image: url(photos/Notyourmarrysue.jpg);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

div.item:nth-of-type(3) {
  --offset: 3;
  background-image: url(photos/thewolf.png);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

div.item:nth-of-type(4) {
  --offset: 4;
  background-image: url(photos/adreamof.jpg);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

div.item:nth-of-type(5) {
  --offset: 5;
  background-image: url(photos/EJ.png);
  height:100%;
  background-size: cover;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
}

input:nth-of-type(1) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  cursor: pointer;
  transform: scale(1.25);
}

input:nth-of-type(1):checked ~ main#carousel{
  --position: 1;
}
  
input:nth-of-type(2) {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
  --position: 2;
}

input:nth-of-type(3) {
  grid-column: 4 /5;
  grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
  --position: 3;
}

input:nth-of-type(4) {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
  --position: 4;
}

input:nth-of-type(5) {
  grid-column: 6 / 7;
  grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
  --position: 5;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="photos/ae_logo.png">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  </head>
  <body>
    <div id="container">
      <img class="logo2"  src="photos/title.png" alt="" srcset="">
      <img class="logo"  src="photos/ae_logo.png" alt="" srcset="">

      <h1>NEW RELEASES</h1>

      <nav id="main-menu">
        <ul class="nav-bar">
          <li class="nav-button-home"><a href="#">Home</a></li>
          <li class="nav-button-books"><a href="#">Books</a></li>
          <li class="nav-button-authors"><a href="#">Authors</a></li>
          <li class="nav-button-submissions"><a href="#">Submissions</a></li>
          <li class="nav-button-contact"><a href="#">Contact US</a></li>
        </ul>
      </nav>
    </div> 
  
    <main id="carousel">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </main>

    <div class="container">
    <div class="photo">div for photo</div>
      <div class="box">
        <div class="content">
          <h3>Heading</h3>
          <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
      </div>
    </div>
  </body>
</html>