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>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Page</title>
    <link rel="stylesheet" href="styles.css" />

  <header id="header">
        <img id="header-img" src="//"" />  <h1>KellyCaseyCo</h1>   
  <nav id="nav-bar">
  <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>

  <h2 id="About">About KellyCaseyCo</h2>
  <h3>Who We Are:</h3>
  <video id="video" src="">

<div id="Products">
  <h2>Services We Offer</h2>
    <li>Website Design</li>
    <li>Social Media Marketing</li>

  <h2 id="Subscribe">Subscribe</h2>
  <form  id="form" action="">
    <input id="email" name="email" type="email" placeholder="">
    <input id="submit" type="submit">
@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;

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

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.