css - how to determine why a particular css rule is being overwritten - css

Question

I'm trying to troubleshoot a css problem (using bootstrap.css btw).
I've created my own custom css file so that I can add to / or in some cases, replace the bootstrap rule.
I've been using the "Inspect" tool in firefox - under the Web Developer options.
I can see that the style I think should be applied to my page has been crossed out. I just read in another post here on stackoverflow that that means the style has been overwritten. But i don't understand why this is being overwritten or how to further troubleshoot this issue.
The css rule itself is a media query - I'm trying to check for the size of the browser, and then depending on how big it is, change an image. How am i changing my browser size? I'm using Firefox's responsive design view tool instead of doing it manually.
Here's the rule that is being overwritten:
#media (max-width: 360px) {
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 1em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 50;
line-height: 1em;
color: inherit;
}
.hero-unit {
background: url("../img/1.jpg");
padding: 1em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
}
This is the one that is being applied:
#media (max-width: 979px){
.hero-unit h1 {
margin-bottom: 0;
font-size: 2.0em;
line-height: 1.5;
letter-spacing: -1px;
color: inherit;
}
.hero-unit p {
font-size: 1.2em;
font-weight: 20;
line-height: 1.5em;
color: inherit;
}
.btn-large {
padding: 6px 10px;
font-size: 11px;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.hero-unit {
padding: 1em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 1.5em;
line-height: 2em;
}
}
Can you tell me where I've gone wrong? Thanks.
EDIT 1:
Here's the actual html where this css is supposed to be applied to:
<div class="container">
<div class="span8">
<div class="hero-unit">
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
</div>
<div class="row-fluid">
<div class="span4">
<h2>list 1 </h2>
<p>list</p>
<p><a class="btn" href="<?php echo base_url();?>index.php/list1/"><i class="icon-list-alt"></i> View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>list2</h2>
<p>some other list</p>
<p><a class="btn" href="<?php echo base_url();?>index.php/list2/"><i class="icon-globe"></i> View details »</a></p>
</div><!--/span-->
<div class="span4">
<h2>routes</h2>
<p>list of all routes</p>
<p><a class="btn" href="<?php echo base_url();?>index.php/routes/"><i class="icon-globe"></i> View details »</a></p>
</div><!--/span-->
</div>
</div>
It's the hero-unit that has a background image defined in the css. I'm not sure if this is the best way to do this or not, but for the most part, it seems to be working.
Thank you.

Answer 1

If the width of the browser is 360px and the max-width: 979px is below the max-width: 360px in your CSS it will take precedence since both apply to a browserwidth of 360px.
Either move the max-width: 360px below or set a #media (max-width: 979px) and (min-width: 361px).
Also, this is a good read on precedence in CSS, http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/