title: image firefox chrome missmatch
body: <p>i'm a first time poster, long time enthusiast.</p>
  
  <p>So i'm working on my personal website, and i haven't got that much experience in html/css, but i've come across a strange mismatch between firefox and chrome. And i was wondering if the wise people of the internet could direct me to where my (probably obvious) error is.</p>
  
  <p>The problem im experiencing is that firefox will cut of the last 2 letters of my image. Ive colored the different parts so its more visible. I'll also post my code for those who want to see that. If you guys could point me towards a solution i would be very much obliged.</p>
  
  <p>Firefox:
  <a href="http://i.imgur.com/aFbYWS7.png" rel="nofollow">http://i.imgur.com/aFbYWS7.png</a>
  Chrome:
  <a href="http://i.imgur.com/xumAiwk.png" rel="nofollow">http://i.imgur.com/xumAiwk.png</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Reset
  ------------------------------------------------------------ */
  * { margin: 0; padding: 0; }
  html { overflow-y: scroll;}
  body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
  ol, ul { list-style: none; margin: 0;}
  ul li { margin: 0; padding: 0;}
  h1 { margin-bottom: 10px; color: #111111;}
  a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
  p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
  img { display: block; margin-bottom: 10px;}
  aside { font-style: italic; font-size: 0.9em;}
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section { 
      display: block;
  }
  
  /* Structure */
  #wrapper {
   width: 96%; 
   max-width: 920px;
   margin: auto;
   padding: 2%;
  } 
  
  /* Banner */
  #banner {
   float: left;
   margin-bottom: 15px;
   width: 100%;
   background-color:red;
  }
  
   #banner img {
    max-width: 450px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color:blue;
   }
  
  #occp {
   float: left;
   margin-bottom: 15px;
   width: 100%;
   background-color:green;
  }
  
   #occp img {
   max-width: 800px;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color:yellow;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"/&gt;
    &lt;title&gt; Demo | Responsive Web&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /&gt;
    &lt;link href="test.css" type="text/css" rel="stylesheet"&gt;
    &lt;!--[if lt IE 9]&gt;
    &lt;script src="//html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
    &lt;script type='text/javascript' src='scripts/respond.min.js'&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
    &lt;div id="wrapper"&gt;
     &lt;header&gt;
      &lt;div id="banner"&gt;
       &lt;img src="https://dl.dropboxusercontent.com/u/15472320/logo.svg" alt="Banner" /&gt;
      &lt;/div&gt;
      &lt;div id="occp"&gt;
       &lt;img src="https://dl.dropboxusercontent.com/u/15472320/occp.svg" alt="Electrical Engineering Student" /&gt;
      &lt;/div&gt;
     &lt;/header&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>