Адаптивность и @media для SCSS

Я создаю веб-сайт, но у меня возникли проблемы с использованием @media. «Ширина», которую я указал ранее, все еще используется, но я хочу, чтобы она игнорировала предыдущие.

ПРИМЕЧАНИЕ. Я пробовал многое, но когда я «проверяю» сайт, написанные мной коды @media оказываются неактивными.

СССС

@media only screen and (max-width: 768px) and (min-width: 376px) {
    .product-list {
        flex-direction: column;
    }

    .product-list-left 
    {
       width: 100%;
    }

    .resim1 
    {
        width: 100%;
    }

    .title 
    {
        width: 100%;
    }

HTML

<div class = "container">
  <div class = "product-list">
    <div class = "product-list-left">
      <div class = "resim1">
        <div class = "title-bx">
          <div class = "title"> Wooden <br>Water Bottles </div>

Я дал те значения, которые мне нужно было дать, но полного результата не получил.

чего я жду

Что случилось