Product Landing Page- CSS FlexBox Issue

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;
}

Hi @kellycasey and welcome to the forum!

There is a right curly bracket missing from the end of your media query.
So, all of your css is interpreted as being inside that media query.

I think that’s probably causing the problem.

That worked, thank you SO MUCH! I thought I was going crazy lol