Media Query & Flex Not Detected - Product Landing Page

Hello all,

I have assen a few posts of this kind already solved, however the solutions for those don’t appear to work with mine.

So I run the tests and it shows that the media query and flex display setting is not detected despite being there. I have tried in different browsers and the same problems occurs. I have run the code through a code validaion site which came back okay.

Please find the code below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
<header id="header">
      <img id="header-img" src="httpsLaunchpadLogo.png">

<nav id="nav-bar">
<a href="#introduction" class="nav-link">Introduction</a>
<a href="#our-services" class="nav-link">Our Services</a>
<a href="#contact" class="nav-link">Contact</a>
<main class="main-doc">
<section id="introduction">

<section id="our-services">
<iframe id="video" width="560" height="315" src="" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

<section id="contact">
<form   action="" id="form">
  <input type="email" id="email" name="email" placeholder="">
  <input id="submit" type="submit">



<script src=></script>

And CSS:

header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;

#header-img {
  height: 200px;
  width: auto;


body {
    display: flex;

@media (max-width: 700px) {
  body {
    justify-content: center;

Please forgive the state of the project at present. I’m just trying to meet the test criteria first… lol.

Any thoughts and guidance anybody may have will be greatly appreciated!

Many thanks

Your code is passing for me.

Thank you! Which browser are you using?