title: CSS rendered differently in chrome vs firefox
body: <p>In chrome (note the stats are shown properly in the gray box (bottom left corner))</p>
  
  <p><img src="https://i.stack.imgur.com/jLdhZ.png" alt="enter image description here"></p>
  
  <p>However in fire-fox, the stats are positioned way below the box (bottom half hidden)</p>
  
  <p><img src="https://i.stack.imgur.com/vmYiE.png" alt="enter image description here"></p>
  
  <p>My CSS code is as follows</p>
  
  <pre><code>.stats_section {
    position: relative;
    opacity: 0.7;
    height: 20px;
    margin-top: -31px;
    margin-left: 76px;
    margin-bottom: 10px;
    width: 24%;
  }
  </code></pre>
  
  <p>How can I fix the CSS so that it works for both browsers?</p>