Media queries not working, what should I do?

Question

css

Hello! Media queries do not work... The thing is that the browser sees them, but does not use them (My media styles are in the console). In the html code, everything is right, as it should be according to the rules of cascading. In the console, the browser simply strips out the media. What I just didn’t do - nothing works. (- this thing is inserted in the head). The code is written in SCSS.

<div class="wrapper__row">
            <p id="button">Нажми на меня :-)</p>
        </div>

//style#button {
                margin: 0;
                padding: 20px 10px;
                width: 30%;

                text-align: center;
                color: rgb(79, 168, 19);
                background-color: white;
                border-radius: 15px;

                user-select: none;
                cursor: pointer;
            }
//style

//media
@media(max-width: 1000px) {
        .wrapper__row {
            #button {
                width: 50%;
            }
        }
    }
}

@media(max-width: 500px){
        #button{
            width: 100%;
        }
}
//media

Answer 1

Specificity