Product Landing Page - Build a Product Landing Page

Tell us what’s happening:
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:

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