Issue when trying to apply a #media query with Bootstrap - html

Question

I'm trying to apply a #media query so when the max-width reach 991px a padding-left will be added to the class, but nothing happens when the max-width reach 991px and the main of the page start to wrap under the aside, I'm using bootstrap and here is a part of the Code :
CSS
#media(max-width : 991px) {
.mainIcon {
padding-left: 47px;
}
}
HTML
<section class="mainin">
<div class="container-fixed mainIcon">
<div class="row mainFoto">
<div class="col-md-4">
<img src="images/code_big.png" alt="">
<a class="boutonCode">Code</a>
</div>
<div class="col-md-4">
<img src="images/tutoriel_big.png" alt="">
<a class="boutonTutoriel">Tutoriels</a>
</div>
<div class="col-md-4">
<img src="images/foucha_big.png" alt="">
<a class="boutonfoucha">PROJECTS</a>
</div>
</div>
<header class="globalTitle">
<h1 class="title">Turn Your Brean <span>On</span></h1>
<h2 class="subtitle">design the future</h2>
</header>
</div>
</section>
LIVE DEMO
when i inspect the page and try to reduce the width of the browser once he is less than 991px i see that the padding-left is not applied , i can't figure out how to fix this !

Answer 1

The issue appears to be that you're calling your media query at the top of the page but the regular styles for .mainIcon below it. This is causing the media query to be overwritten by the normal styles which would explain the adjusted padding-left being crossed out when you expect the element. A good rule of thumb is to always include your media queries below your other CSS (or at least under the class/id/etc. you're looking to change).
try:
.mainIcon {
width: 99%;
padding-top: 14%;
padding-left: 20%;
}
#media (max-width: 991px) {
.mainIcon {
padding-left: 47px;
}
}

Answer 2

#media only screen and (max-width: 991px)
{
.mainIcon {
padding-left: 47px;
}
}
or use !important
padding-left: 47px !important;