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: