title: CSS Media Queries Not Reverting
body: <p>I'm trying to use a div without content to simulate a link break when the screen is smaller than 800 pixels, and it works fine when I shrink the browser down, but when I enlarge it again, the div is still simulating a line break rather than not displaying, and I don't know why it isn't working.</p>
  
  <pre><code>    &lt;div id="container"&gt;
          &lt;div id="container-row"&gt;
              &lt;div id="container-current"&gt;
                      &lt;!-- Sets up the container for the video --&gt;
                  &lt;video id="current-video" class="video-js vjs-default-skin vjs-big-play-centered"
                  controls preload="auto" width="auto" height="auto"
                  data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'&gt;
                          &lt;!-- Location of the video --&gt;
                      &lt;source src="sun1.mp4" type='video/mp4' /&gt;
                      &lt;p class="vjs-no-js"&gt;To view this video please enable JavaScript, and consider upgrading to a web browser that &lt;a href="http://videojs.com/html5-video-support/" target="_blank"&gt;supports HTML5 video&lt;/a&gt;&lt;/p&gt;
                  &lt;/video&gt;
                          &lt;!-- Location of the video --&gt;
                      &lt;source src="sun1.mp4" type='video/mp4' /&gt;
                  &lt;/video&gt;
              &lt;/div&gt;
  
              &lt;div id="container-inactive"&gt;
                  &lt;div class="image-row"&gt;
                          &lt;div class="image-cell"&gt;
                              &lt;img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder"&gt;
                          &lt;/div&gt;
  
                          &lt;div class="image-cell"&gt;
                              &lt;img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder"&gt;
                          &lt;/div&gt;
  
                          &lt;div class="image-break"&gt;&lt;/div&gt;
  
                          &lt;div class="image-cell"&gt;
                              &lt;img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder"&gt;
                          &lt;/div&gt;
  
                          &lt;div class="image-cell"&gt;
                              &lt;img src="http://i.ytimg.com/vi/NpEaa2P7qZI/maxresdefault.jpg" alt="Placeholder"&gt;
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  .video-js .vjs-tech {
      height:100% !important;
      position: relative !important;
  }
  
  body, html {
      margin:0;
      padding:0;
      background-color:black;
  }
  
  #container {
      margin:0;
      padding:0;
  }
  
  #container-current {
      width:50%;
      margin:0 auto;
  }
  
  #container-inactive {
      width:100%;
      display:table;
      border-collapse:separate;
      border-spacing:10px 30px;
  }
  
  .image row {
      display:table-row;
  }
  
  .image-cell {
      display:table-cell;
  }
  
  .image-cell img {
      width:100%;
  }
  
  .image-break {
      display:none;
  }
  
  @media only screen and (max-width: 800px) {
      .image-break {
          display:block;
      }
  }
  </code></pre>
  
  <p>For video display, I am using <a href="http://www.videojs.com/" rel="nofollow">video.js</a></p>