Медиа-запрос работает только для НЕКОТОРЫХ свойств

Question

Медиа-запрос, определенный для подгонки планшетов, меняет некоторые свойства, но никак не реагирует на другие.Пожалуйста, смотрите ниже, какие работают нормально, а какие нет.

// MEDIA FOR TABLET SIZE

@media (min-width: 375px) and (max-width: 768px){

main{

    .top{

        .top-right{
            display: none;   // Works fine
        }

        .top-left{
            background-color: white; // Works fine
            width: 20%;                // DOESNT WORK
            align-items: center;

            .top-left-content{
                margin-left: 0px;
            }

        }
    }


    .bottom{
        background:white;           // DOESNT WORK

        .bottom-left{
            display: none;            //works fine
            width: 100%;              //DOESNT WORK
            background-color: red;  //Works fine
        }


    }
 }


} 

здесь часть HTML для верхнего контейнера в качестве ссылки:

<main>
    <div class="top">
        <div class="top-left">
            <div class="top-left-content">
                <h2>Capture <span>Life</span></h2>
                <p>A fun and easy way to capture &amp; share the moments you live</br>for</p>
                 <div>
                     <img src="img/icon_app_store.png">
                     <img src="img/icon_google_play.png">
                  </div>
               </div>
            </div>
            <div class="top-right">
                <img src="img/site_phone.png">
            </div>
        </div>

Answer 1

Осмотрите элемент в Firefox или Chrome, чтобы увидеть, откуда берутся стили - это может показать, что вы переопределяете их в другом месте, если это так, и вы не можете изменить переопределяющие стили, которые вы можете добавить! Важно вот так -

.top-left{

        background-color: white; 
        width: 20% !important;               
        align-items: center;

Также, как было отмечено в комментариях, если вы скрываете элемент с отображением: нет, для чего нужно добавлять ширину: 100% и background-color: red;

Answer 2

Нужно ИСПОЛЬЗОВАТЬ важно или использовать Тело до занятия

boday .yourclass{ }