@media（最大宽度：992px）。 显示：块不起作用

Question

@media (max-width: 992px) {
    .menu__list {
        display: none;
    }
    .btn__menu {
        display: block;
    }
}

.btn__menu div {
    height: 5px;
    background-color: #000;
    margin-bottom: 5px;
}

.btn__menu {
    width: 40px;
    display: none;
}

The code above writes me that I have an error in display: block; . I need the burger menu to pop up when the screen is less than 992px wide but I have nothing. Where did I go wrong?

Answer 1

Swap the order - your general rules will overwrite the media query rules the way it's now, since they follow * after* them. So just move the media queries to the end.