title: Media Query is not applied
body: <p>Media queries not applying, I'm trying to setup a MQ for iphone</p>
  
  <p>This is the HTML</p>
  
  <pre><code>&lt;body&gt;
          &lt;div class="left"&gt;
              &lt;div class="logo"&gt;
              &lt;/div&gt;
  
                  &lt;div class="nav"&gt;
  
                  &lt;/div&gt;
  
                      &lt;div id="leftfooter"&gt;
                          &lt;div id="colorfoot"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;div class="right"&gt;
                  &lt;div class="rightt"&gt;
                      &lt;div class="main"&gt;
                          &lt;h1 class="headers"&gt;Curriculum&lt;/h1&gt;
  
                                          &lt;div id="primelists"&gt;
                                              &lt;div id="primelist1"&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div id="primelist2"&gt;
  
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="right_footer"&gt;
                              &lt;div class="labels"&gt;
  
                              &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  &lt;body&gt;
          &lt;div class="left"&gt;
              &lt;div class="logo"&gt;
              &lt;/div&gt;
  
                  &lt;div class="nav"&gt;
  
                  &lt;/div&gt;
  
                      &lt;div id="leftfooter"&gt;
                          &lt;div id="colorfoot"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;div class="right"&gt;
                  &lt;div class="rightt"&gt;
                      &lt;div class="main"&gt;
                          &lt;h1 class="headers"&gt;Curriculum&lt;/h1&gt;
  
                                          &lt;div id="primelists"&gt;
                                              &lt;div id="primelist1"&gt;
  
                                              &lt;/div&gt;
  
                                              &lt;div id="primelist2"&gt;
  
                                              &lt;/div&gt;
                                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div class="right_footer"&gt;
                              &lt;div class="labels"&gt;
  
                              &lt;/div&gt;
              &lt;/div&gt;
      &lt;/div
  
  &lt;/body&gt;
  
  &lt;/html&gt;`
  </code></pre>
  
  <p>This is my current main CSS</p>
  
  <pre><code>.right {
      padding: 0 0 0 270px;
      border-right: 10px solid #C9CACE;
  }
  
  .left {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 248px;
      background: url('../img/bg.gif') repeat;
  }
  </code></pre>
  
  <p>This is my media query</p>
  
  <pre><code> @media only screen and (min-width: 320px) and (max-width: 480px)  {
      .right {
          padding: 0 0 0 270px;
          border-right: 10px solid #C9CACE;
          display: table-cell;
      }
  
      .left {
          position: static;
          display: table-cell;
          width: 248px;
          background: url('../img/bg.gif') repeat;
      }
  }
  </code></pre>
  
  <p>It seems my media query still applies the position, top, left and height from my main styling, how do I fix this?</p>