Медиа-запрос точки останова браузера вызывается с непреднамеренной шириной

Question

В настоящее время я пытаюсь реализовать точки останова браузера на веб-странице. Я добавляю первый медиазапрос, чтобы облегчить точку останова для класса div только для того, чтобы обнаружить, что он вызван далеко от значения max-width (значение 500px, значение 124.867px).

Я пробовал обе резолюции, показанные в этом ответе и этом ответе .

Sass:

    .announcement {
        width: 90%;
        height: 40%;
        background: #4C2765;
        display: block;
        margin: 0 auto;
        position: relative;
        margin-top: 2%;
    }


@media screen and (max-width: 40%) {
    .announcement {
        background: green;
    }
}

HTML:

        <div class="announcements">
                <h3 class="title">Announcements</h3>
                <div class="announcement">
                    <div class="announcement-header">
                        <div class="announcement-title">Empire Institute of Information</div>
                        <div class="announcement-author">by John Doe</div>        
                    </div>
                    <p class="preview-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida blandit leo, dictum venenatis magna vulputate non. Mauris ac pretium mi. Ut laoreet urna in facilisis blandit.
                            Donec nec risus nec orci auctor rutrum ut in felis. Ut euismod augue non est rutrum, et ullamcorper dui. Ut arcu odio, tristique eget pretium porttitor, finibus ac o...
                    </p>
                    <button class="continue-reading">Continue Reading</button>
            </div>
            <div class="announcement">
                    <div class="announcement-header">
                        <div class="announcement-title">Empire Institute of Information</div>
                        <div class="announcement-author">by John Doe</div>        
                    </div>
                    <p class="preview-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida blandit leo, dictum venenatis magna vulputate non. Mauris ac pretium mi. Ut laoreet urna in facilisis blandit.
                            Donec nec risus nec orci auctor rutrum ut in felis. Ut euismod augue non est rutrum, et ullamcorper dui. Ut arcu odio, tristique eget pretium porttitor, finibus ac o...
                    </p>
                    <button class="continue-reading">Continue Reading</button>
            </div>
            <div class="announcement">
                    <div class="announcement-header">
                        <div class="announcement-title">Empire Institute of Information</div>
                        <div class="announcement-author">by John Doe</div>        
                    </div>
                    <p class="preview-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida blandit leo, dictum venenatis magna vulputate non. Mauris ac pretium mi. Ut laoreet urna in facilisis blandit.
                            Donec nec risus nec orci auctor rutrum ut in felis. Ut euismod augue non est rutrum, et ullamcorper dui. Ut arcu odio, tristique eget pretium porttitor, finibus ac o...
                    </p>
                    <button class="continue-reading">Continue Reading</button>
            </div>
        </div>

Я ожидаю, что фон каждого объявления div станет зеленым, когда ширина каждого div меньше 500px.

Answer 1

Считайте, что, как ни странно, перезагрузка компьютера, казалось, решила проблему.