title: CSS padding to the right when window is resized smaller
body: <p>I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. <a href="http://www.averylawoffice.ca/2012/04" rel="nofollow noreferrer">It's a wordpress website.</a> As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.</p>
  
  <pre><code>html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
  
  body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
  
  header { width: 960px; height: auto; margin: 0 auto; display: block;}
  
  #container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
  
  aside { width: 260px; height: auto; float: left; position: relative;}
  
  #main { width: 650px; height: auto; float: right; position: relative;}
  
  #footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
  </code></pre>
  
  <p>If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?</p>
  
  <p>I've looked through this one but I already have a min-width defined.
  <a href="https://stackoverflow.com/questions/4612307/website-has-strange-whitespace-on-right-side-of-the-page-when-the-browser-is-res">Website has strange whitespace on right side of the page when the browser is resized to a smaller window</a></p>