Hello all,

I'm not getting media queries specificity.
This is localhost only so I can't provide any links at the moment, I'm sorry for that. Anyway, perhaps you can figure out the logic issue I'm facing here.


By taking the following CSS lines (the order is exactly this one):

Code CSS:
header, 
#main-content,
#main-content-bottom,
footer {
       margin: 0 auto;
       overflow:hidden;
       width: 70%;
}
 
#main-menu ul {
   overflow: hidden;
   text-align: right;
   border-radius: 5px;
   background-color: #333;
   float:right;
   width: 75.5%;
}
 
/*************************
1024
*************************/
@media screen and (max-width: 1024px) { 
   header, 
   #main-content,
   #main-content-bottom,
   footer {
       width: 90%;
   }
 
   #main-menu ul { 
       width: 76.7%;  /* <-- doesn't get assumed why ??*/
	background-color: red;
   }
}


So, on this 1024 I have two rules. One that sets width to 90% on some elements. And the other that set's the menu width to 76.7% and change it's background to red.


The problem is:
When we test it on a 1024 monitor, we GET the width 90% rule applied, and the background turn red on #main-menu ul BUT we DON'T GET the width: 76,7% applied. (instead the 75.5%) is assumed.

What am I not getting here ?


Thanks in advance,
oikram