title: Right sidebar moves when zooming in and out
body: <p>This is not a problem when I zoom out smaller than the original size, but when I zoom in, it covers my content.  This also happens on screens of any other size than my own.  My screen resolution is 1366x768.  This is my website: <a href="http://justiceroulette.com/" rel="nofollow noreferrer">http://justiceroulette.com/</a> The "right sidebar" appears on all the pages except the home page.</p>
  
  <p>I created this theme all on my own, and it's my first one, so I expected there to be errors to be worked out, but I am not sure how to go about adapting my theme to different screen sizes until I know the theme is even functioning properly on the "default" size.  Why isn't the sidebar simply appearing bigger like the rest of the page instead of scooting to the left when I zoom in or view it on my phone?</p>
  
  <p>Here are screenshots in case people reading this don't share my screen size: <a href="https://sta.sh/212zs5aq86oy?edit=1" rel="nofollow noreferrer">https://sta.sh/212zs5aq86oy?edit=1</a></p>
  
  <p>I will provide any code requested.  I have many php files to put this theme together, including multiple CSS files.</p>
  
  <p>Thank you in advance to anyone that tries to help.</p>
  
  <p><em>EDIT</em></p>
  
  <p>I have compiled all the relevant code together, and have tested to see if the problem continues if I compile my header, sidebars, body, and footer in one file.  It is the same.</p>
  
  <p>Things I have done to try and fix this problem include:<br>
  -Changing the #ads from an aside to a div<br>
  -Trying different "position"s in CSS other than relative<br>
  -Changing "float: right" to "clear: left" or "clear: both"<br>
  -Adding "width: 100%;" under "html, body"</p>
  
  <p>None of these seemed to change anything at all.</p>
  
  <pre><code>&lt;div id='site-content'&gt;
  
  &lt;div id="comic-wrapper"&gt;
  &lt;section id="comic"&gt;
  
  Content goes here.
  
  &lt;/section&gt;
  &lt;/div&gt;
  
         &lt;aside id="ads"&gt;
          &lt;div align="center"&gt;
              &lt;a href="https://www.patreon.com/ispazzykitty"&gt;&lt;img src="http://i.imgur.com/PQEvTVF.png" width="197px" height="240px"&gt;&lt;/a&gt;
              &lt;a href="https://www.youtube.com/channel/UC8f1XRc2GAUJ9UXIsr72Pfg"&gt;&lt;img src="http://i.imgur.com/YBOGFHb.png" width="197px" height="240px"&gt;&lt;/a&gt;
              &lt;a href="https://ispazzykitty.deviantart.com/journal/New-Commission-Price-Guide-700723632"&gt;&lt;img src="http://i.imgur.com/aN1UnKc.png" width="197px" height="361px"&gt;&lt;/a&gt;
              &lt;p&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;/aside&gt;
  
          &lt;/div&gt; &lt;!-- site content --&gt;
  
  &lt;div id='site-footer'&gt;
  Justice Roulette is &amp;copy; Starr Law, 2014-&lt;?php echo date ('Y'); ?&gt;.
  &lt;br&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS:</p>
  
  <pre><code>html, body{
  background-color: #002A0C;
  background-image: url(http://i.imgur.com/bux1YSO.png);
  padding: 0;
  margin: 0;
  border: 0;
  width: 100%;
  }
  #comic-wrapper{
  width: 1032px;
  min-height: 779px;
  position: absolute;
  left: 97px;
  }
  #ads{
  background-color: clear;
  float: right;
  width: 220px;
  height: 1000px;
  position: relative;
  top: 10px;
  }
  #comic{
  background-color: #078E2D;
  background-image: url(http://i.imgur.com/cWA1Zj0.png);
  height: 859px;
  width: auto;
  }
  .comicpagespace{
  margin-top: 10px;
  width: 954px;
  height: 536px;
  }
  img{
  max-width: 100%;
  max-height: 100%;
  }
  #site-footer {
  clear: both;
  text-align: center;
  width: auto;
  padding: 10px;
  background-color: #150028;
  color: #E2F7ED;
  font-family: "Dosis", "Liberation Sans", sans-serif;
  line-height: 20px;
  }
  </code></pre>