title: Label looks good on Chrome but not on Firefox
body: <p>I recently just asked a question on here. I am asking a few more (each in a separate question so I don't get flagged). I am making a website for a client, but the label is over top of the title in Firefox but in Chrome it looks like the way I want it. View the photos below.</p>
  
  <hr>
  
  <p><strong>Chrome</strong></p>
  
  <p><img src="https://i.stack.imgur.com/cZs9Z.png" alt="enter image description here"></p>
  
  <p><strong>Firefox</strong></p>
  
  <p><img src="https://i.stack.imgur.com/1Flzz.png" alt="enter image description here"></p>
  
  <hr>
  
  <p>Here is the CSS:</p>
  
  <pre><code>      .label {
  border: 1px solid #000;
    }
  .label-danger {
    background-color: #d9534f;
  }
  .label-danger[href]:hover,
  .label-danger[href]:focus {
    background-color: #c9302c;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>        &lt;div class="row features"&gt;
          &lt;div class="col-lg-4 text-center"&gt;
              &lt;div class="single-fet"&gt;
                  &lt;div&gt;
                  &lt;span class="icon-stack icon-4x"&gt;
    &lt;i class="icon-circle icon-stack-base"&gt;&lt;/i&gt;
    &lt;i class="icon-ok icon-light"&gt;&lt;/i&gt;
  &lt;/span&gt;
                  &lt;/div&gt;
  &lt;h2&gt;Speedy Servers with &lt;span class="label label-danger"&gt;SSDs&lt;/span&gt;    
  &lt;/h2&gt;
  &lt;p&gt;You will get the fastest servers possible with SSD's clocked at 1gb/s transfer.&lt;/p&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>