title: Firefox absolute position different then Chrome
body: <p>I have been encountering an error lately with some code. Basically, the absolute position property works correctly on Chrome but gives different results on Firefox. Any ideas why?  </p>
  
  <p>Representations:</p>
  
  <p>Chrome:
  <a href="https://i.stack.imgur.com/VEJfk.png" rel="nofollow"><img src="https://i.stack.imgur.com/VEJfk.png" alt="Correct"></a></p>
  
  <p>Firefox:
  <a href="https://i.stack.imgur.com/rdmcL.png" rel="nofollow"><img src="https://i.stack.imgur.com/rdmcL.png" alt="Incorrect"></a>
  NOTE: On the firefox representation the second small box exists but is cut off.</p>
  
  <p>Code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="card-info"&gt;
          &lt;/div&gt;
          &lt;div class="arrow-wrapper"&gt;
              &lt;i class=" visible-lg arrow-left pull-left fa fa-arrow-circle-o-left fa-4x" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="visible-lg arrow-right pull-right fa fa-arrow-circle-o-right fa-4x" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>SCSS:</p>
  
  <pre><code>.left-arrow {
      right: 90%;
      left: 10%;
  }
  .right-arrow {
      left: 90%;
      right: 10%;
  }
  .arrow-wrapper {
      position: absolute;
      padding-left: 100px;
      padding-right: 100px;
      width: 100%;
  
  }
  </code></pre>