Медиа-запросы не перекрывают друг друга

Question

У меня проблема с моими медиа-запросами, так как она не переопределяет друг друга. Первая итерация (max-width: 960px) работает нормально, но вторая (max-width: 380px) не работает, и я не знаю почему. Помощь приветствуется, спасибо.

.fb { 
 
    width: 50px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 

 
@media only screen and (max-width: 960px) { 
 

 
/* this works */ 
 

 
.fb { 
 
    position: relative; 
 
    width: 40px!important; 
 
    margin-left: 15px!important; 
 
    margin-right: 15px!important;     
 
      } 
 
} 
 

 

 
@media only screen and (max-width: 380px) { 
 

 
/* this does not work */ 
 
.fb { 
 

 
    width: 30px!important; 
 
    margin-left: 10px!important; 
 
    margin-right: 10px!important;    
 
      } 
 
}

<div class="social_container"> 
 
<a href="https://www.facebook.com/" target="_blank"><img class="fb" src= "http://placekitten.com/200/300" alt=""></a> 
 
</div>

Answer 1

вы ошибочно пишется Маржа-Rigth пожалуйста, измените его на маржинальной правом и удалить важно!

.fb { 
 
    width: 50px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 
@media only screen and (max-width: 960px) { 
 
    .fb { 
 
    position: relative; 
 
    width: 40px; 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
    } 
 
} 
 
@media only screen and (max-width: 380px) { 
 
    .fb { 
 
    width: 30px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    } 
 
}

<div class="social_container"> 
 
    <a href="https://www.facebook.com/" target="_blank"> 
 
    <img class="fb" src="https://i.stack.imgur.com/UzPkq.jpg" alt=""> 
 
    </a> 
 
</div>

Answer 2

см fiddle

.social_container a { 
 
    color: red; 
 
} 
 

 
@media only screen and (max-width: 960px) { 
 

 

 
.social_container a{ 
 
    color: green; 
 
} 
 

 
} 
 
@media only screen and (max-width: 380px) { 
 

 
.social_container a{ 
 

 
    color: pink; 
 
      } 
 
}

<div class="social_container"> 
 
<a href="https://www.facebook.com/" target="_blank">fb</a> 
 
</div>