@media attribute not working?

Question

css

Hello. Styles do not work through the media attribute for the block. Everything works fine for other blocks, but not for .header. Here is the html:

<div class="header">
    <div class="container">
      <div class="header__content">
        <div class="row">
          <div class="text col-xl-5">
            <h2 class="title">Никита Шелудько</h2>
            <h3 class="title">Никита Шелудько</h2>
            <p class="subtitle">Веб-разработчик, верстальщик, веб-дизайнер</p>
          </div>
          <img src="img/me.png" alt="" >
        </div>
      </div>
    </div>
  </div>

css:

@media screen and (max-width: 840px) {
  .header{
    background:red;
                 .header__content{
    .text{
                font-size: 2em;
                }
          }
                }

If anything, I write in Scss. Tell me, what's the problem?

Answer 1

Wrap media in .header.

.header {
   @media (max-width: 840px) {
      /*стили для header*/

The compiler will assemble it the way it should.
I’m not sure about the syntax, I write in Sass, I haven’t worked with SCSS for a couple of years.

Answer 2

1 well, obviously something with indents
2 Sass is written without brackets, did you mean scss?
try to refer to &__content
Well, it immediately caught my eye
, there is not enough closing curly brace