title: Floated li elements from section drop onto two lines in Firefox version 24
body: <p>Browser testing my development site i'm having an issue, mainly on Firefox version 24. I have set the li elements inside a full width section of 100%, Inside I have 5 floated li with anchor elements set at 20% width. These all sit in place across majority of all browsers, except Firefox 24 which makes the last element drop down onto the next line. I can fix this by reducing the width, but then it obviously does not fill the wrapper width as intended. I have an additional class of .tablet-half, which moves the last two elements to take up 50% each of the wrapper at smaller sizes. I don't know if this is somehow affecting it?  The section HTML is;</p>
  
  <pre><code>&lt;section class="header-cta wrapper"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;a href="/security-systems/" class="cta-box btn--info"&gt;
              &lt;img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/parking.svg" alt="parking icon"&gt;
              &lt;p class="cta-box__headline"&gt;Parking Barriers&lt;/p&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a href="/access-control/" class="cta-box btn--trader"&gt;
              &lt;img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/anpr.svg" alt="anpr icon"&gt;
              &lt;p class="cta-box__headline"&gt;ANPR&lt;/p&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a href="/security-fencing/" class="cta-box btn--info tablet-half"&gt;
              &lt;img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/security-fencing.svg" alt="security fencing icon"&gt;
              &lt;p class="cta-box__headline"&gt;Security Fencing&lt;/p&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a href="/cctv-systems/" class="cta-box btn--trader-dark tablet-half"&gt;
              &lt;img src="http://dev5.bmpreview.co.uk/wp-content/themes/matrix/images/cctv.svg" alt="cctv icon"&gt;
              &lt;p class="cta-box__headline"&gt;CCTV Solutions&lt;/p&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;&lt;/section&gt;
  </code></pre>
  
  <p>Basic styles; (i'm using box-sizing, and there is no margin/padding on the ul,li)</p>
  
  <pre><code>.wrapper {
    width: 100%;
    float: left;
   }
  
  .header-cta .cta-box {
   width: 20%;
   padding-right: 0.5rem;
   padding-left: 0.5rem;
  }
  
  .tablet-half  {
   width: 50%;
  }        
  </code></pre>
  
  <p>I have taken an image on my phone of how it looks in Firefox 24
  <a href="https://i.stack.imgur.com/RI9it.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RI9it.jpg" alt="enter image description here"></a></p>
  
  <p>This is the test site <a href="http://dev5.bmpreview.co.uk/" rel="nofollow noreferrer">url</a> where I am working, if that helps.</p>