Why do styles stop working in a media query?

Question

css

Hello! I decided to modernize a little the scss code, I started with nesting, but I ran into such a problem, the styles in media queries start to re-certify to work. What is the mb problem?

<header class="header">
  <div class="container">
    <div class="header__body">
      <a href="" class="header__logo">
        <img src="img/header/nav/logo.png" alt="">
      </a>
      <div class="header__burger"><span></span></div>
      <nav class="header__menu">
        <ul class="header__list">
          <li><a href="" class="header__link">Home</a></li>
          <li><a href="" class="header__link">About</a></li>
          <li><a href="" class="header__link">Pricing</a></li>
          <li><a href="" class="header__link">Our drones</a></li>
          <li><a href="" class="header__link">Our realizations</a></li>
          <li><a href="" class="header__link">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

@import "nulling-style.scss";

//position

%pos-fixed {
  position: fixed;
  top: 0;
  left: 0;
}
%pos-absolute {
  position: absolute;
  top: 0;
  left: 0;
}
%pos-relative {
  position: relative;
  top: 0;
  left: 0;
}

//fonts

$font-main: Arial, "Helvetica Neue", Helvetica, sans-serif;


body {
  font-family: $font-main;
  font-weight: 400;
}

img {
  max-width: 100%;
}

.wrapper {
  & .container {
    max-width: 1356px;
    margin: 0 auto;
    padding: 0 20px;
  }
  & .header {
    @extend %pos-fixed;
    width: 100%;
    z-index: 50;
    & :before {
      content: '';
      @extend %pos-absolute;
      width: 100%;
      height: 100%;
      background-color: #888;
      z-index: 2;
    }
    & .header__body {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80px;
      & .header__logo {
        z-index: 2;
      }
      & .header__burger {
        display: none;
      }
      & .header__menu {
        & .header__list {
          display: flex;
          position: relative;
          z-index: 2;
          & .header__link {
            font-size: 18px;
            color: #fff;
            line-height: 24px;
            margin: 0 0 0 33px;
          }
        }
      }
    }
  }
}


@media (max-width: 1140px) {
  body.lock {
    overflow: hidden;
  }
  .header__burger {
    display: block;
    position: relative;
    z-index: 3;
    top: 0;
    left: 0;
    width: 30px;
    height: 20px;
  }
  .header__burger span {
    position: absolute;
    top: 9px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease 0s;
  }
  .header__burger:before,
  .header__burger:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: all 0.3s ease 0s;
  }
  .header__burge:before {
    top: 0;
  }
  .header__burger:after {
    bottom: 0;
  }
  .header__burger.active:before {
    transform: rotate(45deg);
    top: 9px;
  }
  .header__burger.active:after {
    transform: rotate(-45deg);
    bottom: 9px;
  }
  .header__burger.active span {
    transform: scale(0);
  }
  .header__menu {
    position: fixed;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #777;
    overflow: auto;
    padding: 100px 0 0 0;
    transition: all 0.4s ease 0s;
  }
  .header__menu.active {
    top: 0;
  }
  .header__list {
    display: block;
  }
  .header__list li {
    margin: 0 0 30px 0;
  }
}

Answer 1

You increased the weight of selectors with your nesting, it's like writing !important. The media query selector must be the same as the main layout selector.

.box .link { color: #000; }
@media (max-width: 720px) { 
   .box .link { color: red; } 
}

Answer 2

The main purpose of media queries is to stop working [turn off CSS] in certain conditions.