title: Different image rendering in Chrome/Edge and Firefox
body: <p>I'm doing a website for a homework and I'm having trouble with rendering an image. It looks as intended on Chrome and Edge browsers, but on Firefox it looks displaced.</p>
  
  <p>This is the page on Chrome/Edge: <a href="https://i.stack.imgur.com/VDBey.png" rel="nofollow noreferrer">Chrome/Edge Image</a></p>
  
  <p>And this is a screenshot of the same page on Firefox: <a href="https://i.stack.imgur.com/lbBD2.png" rel="nofollow noreferrer">Firefox image</a></p>
  
  <p>I can't seem to understand why are they different?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* STRUTTURA BASE PER TUTTI GLI HTML */
  @import url('https://fonts.googleapis.com/css?family=Advent Pro');
  html, body {
      margin: 0;
      padding: 0;
  }
  
  html {
      font - size: 10 px;
      background - color: #ABCDEF;
  }
  
  body {
      font - family: 'Advent Pro';
  }
  
  div.all {
      position: relative;
      width: 70 % ;
      min - width: 800 px;
      margin: 0 auto;
  }
  
  
  /* CAMERA.html */
  
  div.immDx {
      position: relative;
      overflow: hidden;
      margin - top: 6 % ;
      font - size: 170 % ;
  }
  
  img.imgDx {
      position: relative;
      overflow: visible;
      float: right;
      height: 60 % ;
  
  }
  
  span.nameDx {
      position: relative;
      margin - left: 20 % ;
  }
  
  span.descDx {
      position: relative;
      margin - left: 20 % ;
      text - decoration: underline;
  }
  
  span.listaDx {
      position: relative;
      margin - left: 40 % ;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;body&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt; QM-D_2_CAMERA &lt;/title&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Advent Pro"/&gt;
          &lt;link rel="stylesheet" href="mystyle.css"&gt;
          &lt;div class="all"&gt;
              &lt;div class="immDx"&gt;
                  &lt;img src="http://i.imgur.com/YZe0gad.jpg" class="imgDx"/&gt;
                  &lt;span class="nameDx"&gt; HEMNES no. 202.004.56 &lt;/span&gt; &lt;BR/&gt; &lt;BR/&gt;
                  &lt;span class="descDx"&gt; DESCRIZIONE DEL PRODOTTO&lt;/span&gt; &lt;BR/&gt; &lt;BR/&gt;
                  &lt;span class="nameDx"&gt; Parti principali/ Ripiano: &lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="listaDx"&gt; Pino massiccio&lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="listaDx"&gt; Mordente&lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="listaDx"&gt; Vernice acrilica trasparente&lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="nameDx"&gt; Lati del cassetto/Parte posteriore: &lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="listaDx"&gt; Pino massiccio&lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="nameDx"&gt; Base del cassetto: &lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="listaDx"&gt;Fibra di legno&lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="listaDx"&gt;Lamina&lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="descDx"&gt; MISURE DEL PRODOTTO&lt;/span&gt; &lt;BR/&gt; &lt;BR/&gt;
                  &lt;span class="nameDx"&gt; Larghezza: 46 cm &lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="nameDx"&gt; Profondità: 35 cm &lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="nameDx"&gt; Altezza: 70 cm &lt;/span&gt;&lt;BR/&gt;
                  &lt;span class="nameDx"&gt; Profondità cassetto (interna): 23 cm &lt;/span&gt;&lt;BR/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>