title: Absolute Positioning with Media Queries
body: <p>I am having trouble styling an absolute element using media queries. Right now I have a box that is positioned at the top left-hand corner of the screen. But, when the screen size is below <code>768px</code>, I want this box to stick to the upper right-hand corner. Here's my code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
    position: absolute;
    left: 0;
    top: 0;
    height: 200px;
    width: 200px;
    background: red;
  }
  
  @media (max-width: 768px) {
    div {
      right: 0;
    }
  }
  </code></pre>
  
  <p>Here's a link to my pen: <a href="https://codepen.io/Hudson_Taylor11/pen/ZeNXwz" rel="nofollow noreferrer">https://codepen.io/Hudson_Taylor11/pen/ZeNXwz</a></p>
  
  <p>Thanks!</p>