Media Queries Are Not Overriding Each Other

Question

I have a problem with my media queries as it is not overriding each other. The first iteration (max-width: 960px) works fine but the second one (max-width: 380px) does not work and I do not know why. Help is appreciated, thanks.

.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

you are wrongly spelled margin-rigth please change it to margin-right and remove !important

.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.sstatic.net/UzPkq.jpg" alt="">
  </a>
</div>

Answer 2

see 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>