title: Displays correctly in Chrome, but not in Internet explorer 11
body: <p>The site looks great in Chrome and Firefox:<br> <img src="https://i.stack.imgur.com/IF2fr.png" alt="Chrome-home"> and <img src="https://i.stack.imgur.com/V2iAa.png" alt="Chrome-about">
  <p>When I open the site in Internet Explorer, there is a huge gap on the right on my first two pages in the web-browser:</p>  <img src="https://i.stack.imgur.com/jZltN.png" alt="Ie-home"> <img src="https://i.stack.imgur.com/cqxsf.png" alt="ie-about"> </p>
  
  <p><br/>  How can I remove the gap in the Internet Explorer?  Do I need to use a media query, specifically for internet explorer?  Is there a CSS hack or something?  I tried using a media query, but I wrote it incorrectly, and basically messed up my site. I removed it.  Oh yeah, is there a site I can use to test for Safari's web browser. I'm working on a PC. Any ideas would be much appreciated. :) </p>
  
  <p>Updated!:  A fiddle: <a href="http://jsfiddle.net/5yon04ns/" rel="nofollow noreferrer">http://jsfiddle.net/5yon04ns/</a></p>
  
  <pre><code>&lt;p&gt; I have code in the fiddle&lt;/p&gt;
  </code></pre>