Медиа-запрос не отображается в инструменте проверки Chrome, только с этим конкретным кодом.Чем это вызвано?

Question

Но проблема только с этим конкретным кодом.Есть много других кодов, которые я использую в качестве примера, и Media Query действительно появляется.

Но проблема только в этом конкретном коде.Есть много других кодов, которые я использую в качестве примера, и Media Query действительно появляется.

Как заставить его отображаться, чтобы я мог отредактировать его оттуда?

body {
  background: #eee;
  font-family: 'Lato', sans-serif;
}

.nav-link {
  position: relative;
  float: right;
  padding: 24px 40px 15px 20px;
}

#header {
  overflow: hidden;
}

@media (max-width: 410px) {
  #nav-bar {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    margin-top: 30px;
    padding: 0 50px;
  }
}

<header id="header">


  <nav id="nav-bar">

    <div class="nav-link">Pricing</div>
    <div class="nav-link">How It Works</div>
    <div class="nav-link">Features</div>

  </nav>

</header>

Answer 1

Попробуйте обновить синтаксис медиазапроса до:

 @media screen and (max-width: 410px) {
      // Code goes here
 }