It seems that the tests of Build a Technical Documentation Page are not working correctly

I have a template for the fourth responsive web design project that pass all tests but the test about the nav bar being in the left and visible all the time. However it is very clear that my template show the navbar in the left and visible all the time with the css of position: fixed; so the tests doesn’t seem very accurate.

My template below, judge yourself if the test about the position of the navbar is fine or not:

<head>
<style>
  body{
    display: flex;
    flex-direction: row;
  }
  #navbar {
    display: block;
    /* flex-direction: column; */
    top: 5px;
    position: fixed;
    background-color: rgb(208, 235, 233);
  }
  section{
    margin: 15px;
    scroll-margin-top: 10px;
  }
  main {
      margin-left: 85px;
    }

  .buba{
    display: flex;
    flex-direction: column;
  }
  a, header{
    margin: 2px;
  }
  @media (max-width: 400px){
    body {
      flex-direction: column;
    }
    .buba {
      flex-direction: row;
    }
    main {
    margin-top: 55px;
    margin-left: 0px;
    }
    section {
      scroll-margin-top: 60px;
    }
    a {
      font-size: .97em;
    }
  }
</style>
</head>
<body>
<nav id="navbar">
  <header>Contents</header>
  <div class="buba">
    <a href="#Description_1" class="nav-link">Description 1</a>
    <a href="#Description_2" class="nav-link">Description 2</a>
    <a href="#Description_3" class="nav-link">Description 3</a>
    <a href="#Description_4" class="nav-link">Description 4</a>
    <a href="#Description_5" class="nav-link">Description 5</a>
  </div>
</nav>
<main id="main-doc">
<section class="main-section" id="Description_1">
  <header>Description 1</header>
  <p>Lorem, ipsum dolor sit</p>
  <p>Lorem ipsum, dolor sit</p>
  <code></code>
  <li>First thing</li>
</section>
<hr>
<section class="main-section" id="Description_2">
  <header>Description 2</header>
  <p>Lorem ipsum dolor sit</p>
  <p>Lorem ipsum dolor sit</p>
  <code></code>
  <li>Second thing</li>
</section>
<hr>
<section class="main-section" id="Description_3">
  <header>Description 3</header>
  <p>Lorem ipsum dolor sit?</p>
  <p>Lorem ipsum dolor sit</p>
  <code></code>
  <li>Third thing</li>
</section>
<hr>
<section class="main-section" id="Description_4">
  <header>Description 4</header>
  <p>Lorem ipsum dolor sit</p>
  <p>Lorem, ipsum dolor sit</p>
  <code></code>
  <li>Fourth thing</li>
</section>
<hr>
<section class="main-section" id="Description_5">
  <header>Description 5</header>
  <p>Lorem ipsum dolor sit</p>
  <p>Lorem, ipsum dolor sit</p>
  <code></code>
  <li>Fifth thing</li>
</section>
</main>
</body>

Variations of this template doesn’t seem to work, by example putting left: 0px; in navbar css, or quitting all responsiveness forcing that, no matter the width of the viewport, the navbar is in the left.

please give a link to your project so it is possible to see it live

It seems that it pass the tests now (I dont know why, I didnt change something). Strange. You can see it here:

do you remember what the error was? you can see it below the failed user story
one test needs a minimum page width to work correctly