title: Media query div not changing width but everything else works
body: <p>I am trying to adjust the width of a div when the browser decreases in size using max-width. The div does everything but change width. I have looked at it through the developer tools on the chrome browser and the width is slashed out. What's wrong?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen and (max-width: 500px)" href="responsive.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="left"&gt;
      &lt;/div&gt;
  
      &lt;div class="containerRight"&gt;
          &lt;div class="incontainer"&gt;
              &lt;div class="post"&gt; Aifjoisdjfiosjdfoisdjfoidsjfoisjd&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>MAIN CSS:</strong></p>
  
  <pre><code>*{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box; 
  }
  
  html, body {
  height:100%;
  } 
  
  body {
  padding:60px 0 0 0; /* 60 — header height*/
  margin:0;
  }
  
  
  .main {
  min-width:100%;
  height:60px;
  margin-top: -60px;  /* 60 — header height*/
  margin-left: -300px;
  border-bottom: solid 1pt #ADADAD;
  }
  
  
  .containerRight {
  float:left;
  width:100%;
  height: 100%;
  overflow-y: scroll;
  }
  
  
  
  .left {
  float:left;
  height: 100%;
  width: 300px;
  border-right: solid 1px #C9C9C9;
  -webkit-box-shadow: 1px 0 2px #888888;
  -moz-box-shadow: 1px 0 2px #888888;
  box-shadow: 1px 0 2px #888888;
  }
  </code></pre>
  
  <p><strong>RESPONSIVE CSS</strong></p>
  
  <pre><code>.left {
     width: 800px;
     background-color: red;
  }
  
  .containerRight {
     display: none;
  }
  </code></pre>