Product Landing Page - Build a Product Landing Page

I need help with placing that purple subscriptions div. I can’t figure out why it is placing itself above those three blue divs instead of appearing after them

   **Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
   <title>Accessibility Quiz</title>
   <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
   <header id="header">
     <img id="header-img" class="logo" src="https://images-platform.99static.com//GdMaE3weadnrY_CL15sfzGZr5kw=/277x0:1008x731/fit-in/500x500/projects-files/17/1726/172666/240de4f2-6240-107f-cb04-1d4dc28e5c68.png"></a>
     <nav id="nav-bar">
       <ul>
          <li><a class="nav-link" href="">Plushies</a></li>
         <li><a class="nav-link" href="">Plushies</a></li>
         <li><a class="nav-link" href="">Plushies</a></li>
       </ul>
     </nav>
   </header>

   <div class="hero-image"></div>
   <main>

  <section class="new-arrivals">
    <h2>New Arrivals</h2>
       <div id="new-arrivals-containter">
      <div class="arrival-1">
     </div>
     <div class="arrival-1">
     </div>
     <div class="arrival-1">
       </div>
   </section>

<section>

<div class="subscription">
     </div>

</section>
   
   </main>
 </body>
</html>

/* file: styles.css */
body {
 background: #e9e1e8;
	color: #1b1b32;
	font-family: Helvetica;
	margin: 0;
}

#logo {
 width: max(100px, 18vw);
	background-color: #0a0a23;
 aspect-ratio: 35 / 4;
	padding: 0.4rem;
}

header {
 width: 100%;
	height: 53px;
	background-color: #950001;
	display: flex;
	position: fixed;
}

nav {
 width: 50%;
	max-width: 300px;
	height: 50px;
}

nav > ul {
 display: flex;
	justify-content: space-evenly;
 flex-wrap: wrap;
	align-items: center;
	padding-inline-start: 0;
	margin-block: 0;
	height: 100%;
}

nav > ul > li {
 color: #dfdfe2;
 margin: 0 0.2rem;
	padding: 0.2rem;
	display: block;
}

nav > ul > li:hover {
 background-color: #dfdfe2;
 color: #1b1b32;
 cursor: pointer;
}

li > a {
 color: inherit;
 text-decoration: none;
}

li{
	border-right: 1px solid;
	}
	li:last-child{
		border-right: none;
	}


.hero-image {
 background-image: url(https://www.jellycat.com/images/articles/OTTO_FAIR_PORTRAIT.jpg);
 background-color: #cccccc;
 height: 400px;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

#new-arrivals-containter{
	display: flex;
	 box-shadow: 2px 2px 15px #bebebe;
 margin-top: 5%;
 padding: 2%;
	align-content: center;
	justify-content: center;
	height: 30px;
}

#new-arrivals-containter div{
	background-color:blue;
	align-items: center;
	margin: 20px;
	width: 100%;
	height: 600%;
}



.subscription{
	position:relative;
 width: 200px;
 height: 25px;
 margin: 10px auto;
	background-image: url(https://i.pinimg.com/originals/4c/13/3e/4c133efd8568f76fb25dd07ad130dc0c.jpg);
 
}
   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

The issue is with the height properties in these two rule sets. Play around with them to see how they work. I would start by removing the height completely on the first one and then setting the height on the second in something like rem or px. I’m not sure what your requirements are here so I can’t give you an official answer on what you should do. I’m just pointing out where the issue is.

Thank you so much I was struggling with this one for a while

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.