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">
   <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" />
   <header id="header">
     <img id="header-img" class="logo" src=""></a>
     <nav id="nav-bar">
          <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>

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

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


<div class="subscription">


/* 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;

	border-right: 1px solid;
		border-right: none;

.hero-image {
 background-image: url(;
 background-color: #cccccc;
 height: 400px;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;

	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{
	align-items: center;
	margin: 20px;
	width: 100%;
	height: 600%;

 width: 200px;
 height: 25px;
 margin: 10px auto;
	background-image: url(;
   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ 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.