title: CSS media query not changing elements?
body: <p>I'm trying to get this media query to work...  I've changed a border and element colour, and position so I can clearly see when it's worked but it doesn't seem to be applying the rule at all - what have I missed?  I'm looking for spaces and typos but I can't see any...</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="introcontainer"&gt;
       &lt;div id="introcontainer2"&gt;
           &lt;div class="introbox" id="introbox1"&gt;48&lt;/div&gt;
           &lt;div class="introbox" id="introbox2"&gt;3&lt;/div&gt;
           &lt;div class="introbox" id="introbox3"&gt;£99&lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@media only screen and (min-width: 768px)  and (max-width: 992px) {
  
  #introcontainer {
      width: 660px; 
      height: 134px; 
      position: absolute; left: 50%; top: 100px; 
      margin-left: -330px; border-style: dashed; border-color: red;}
  
  .introbox {
  width: 214px;
  height: 130px;
  background: #fffff;
  opacity: 0.1;
  border-radius: 4px;}
  }
  
  #introcontainer {width: 660px; height: 134px; position: absolute; left: 50%;           top: 250px; margin-left: -330px; border-style: dashed; border-color: aqua;}
  
  #introcontainer2 {position: relative;}
  .introbox {
  width: 214px;
  height: 130px;
  background: #6666CC;
  opacity: 0.5;
  border-radius: 4px;
  }
  
  #introbox1 {position: absolute; left: 0px;}
  
  #introbox2 {margin-left: auto; margin-right: auto;}
  #introbox3 {position: absolute; right: 0px; top: 0px;}
  </code></pre>