I’m stuck at the last two instructions of using at least one css flexbox and a media query rule in my code. No matter what I try, it won’t work.
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="stles.css">
<title>Product Landing Page</title>
<header id="header">
<img src=https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/ikqra03zdnggljdu5vv0 id="header-img" width="100px">
<meta name="viewport" content="width=devive-width, initial-scale=1.0">
<nav id="nav-bar">
<a href="#curriculum" class="nav-link">curriculum</a>
<a href="#profile" class="nav-link">profile</a>
<a href="#certification" class="nav-link">certification</a>
</nav>
</header>
</head>
<body>
<section id="curriculum"></section>
<section id="profile"></section>
<section id="certification">
<iframe src= "https://youtu.be/BKwEiV4T9eU" id="video"></iframe>
</section>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" placeholder="email address" name="email" required>
<input type ="submit" placeholder="submit" id="submit">
</form>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0px;
width: 100%;
padding: 25px 0px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: black;
opacity: 0.8;
}
@media screen and(min-width: 30rem)
body {
display: flex;
flex-direction: column;
max-width: 75rem;
margin: auto;
}
**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: