I’m trying to finish my Product Landing Page project and I thought to create a Flexbox I needed to do display: flex, but I keep getting told that I don’t have a Flexbox for my page. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product Page</title>
<link
href="https://fonts.googleapis.com/css?family=Anton|Baskervville|Raleway&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<header id="header">
<img id="header-img" src="//s.imgur.com/min/embed.js"" /> <h1>KellyCaseyCo</h1>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#About">About</a></li>
<li><a class="nav-link" href="#Products">Products</a></li>
<li><a class="nav-link" href="#Subscribe">Subscribe</a></li>
</ul>
</nav>
</header>
<main>
<body>
<div>
<h2 id="About">About KellyCaseyCo</h2>
<h3>Who We Are:</h3>
<video id="video" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
</video>
</div>
<div id="Products">
<h2>Services We Offer</h2>
<ol>
<li>Branding</li>
<li>Website Design</li>
<li>Social Media Marketing</li>
</div>
<div>
<h2 id="Subscribe">Subscribe</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<h4>Email:</h4>
<input id="email" name="email" type="email" placeholder="kelly@casey.co">
</input>
<input id="submit" type="submit">
</input>
</form>
</div>
</body>
</main>
</html>
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
h1 {
color: #FCDA67;
font-size: min(5vw, 1.2em);
text-align: center;
}
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%;
font-family: anton
}
nav > ul > li {
color: #F29A96;
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
}
nav > ul > li:hover {
background-color: #B8DDB6;
color: #FB8B5B;
cursor: pointer;
}
li > a {
color: inherit;
text-decoration: none;
}
main {
padding-top: 50px;
background-color: #C8EEF2
}
section {
width: 80%;
margin: 0 auto 10px auto;
max-width: 600px;
}
h1,
h2, h5, h3, h4 {
font-family: Raleway, Tahoma;
}
h2 {
border-bottom: 10px solid #F29A96;
margin-top: 0px;
padding-top: 60px;
color: #FB8B5B;
background-color: #C8EEF2;
font-size: min(7vw, 5em)}
ol {
font-family: anton;
font-size: min(5vw, 3em);
color: #19224D;
}