title: Fixed footer gets cut off horizontally
body: <p>I've been going mad trying to fix the responsiveness issue on a site I'm working on, and I can't find any solutions here or anywhere else. The main problem is my fixed footer. On the landing page of the site, there's a header, main area, and footer (the page expands when arrow clicked on, but that's irrelevant). </p>
  
  <p>I've attached the footer to the bottom of the page using fixed positioning. When the screen width is >1024px, the  header, main, and footer widths are 100%. Below 1024px, the header and footer widths become static (with 1024 as the static width). </p>
  
  <p>The problem is, there comes a point where the footer should be overflowing on the right side of the screen (since the width becomes fixed). I can scroll right to see the rest of the menu in the header, but the footer doesn't scroll to the right. Rather, it just cuts off everything that would normally be there.</p>
  
  <p>I've tried to recreate the issue in Codepen with the relevant code here: <a href="http://cdpn.io/iCJct" rel="nofollow">http://cdpn.io/iCJct</a> but it doesn't act the same as the website (located here: <a href="http://dev.longviewsources.com/" rel="nofollow">http://dev.longviewsources.com/</a>).</p>
  
  <p>Thank you for your help!</p>