Поля хорошо работают на хроме, но не на firefox

Question

Я изучаю базовый CSS в настоящее время, я пытаюсь создать небольшую страницу продукта макета, которая использует сетчатую систему с 4 столбцами. Он выглядит и отлично работает на хроме, но на Firefox он так ломается. Вот как это выглядит на Firefox:

Я не могу показаться, чтобы выяснить, как это исправить, я попытался изменить полей/отступы из различных мест, но безрезультатно, это все еще баловаться в Firefox.

Вот мой CSS:

html { 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
    background: #232526; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to left, #232526 , #414345); /* Chrome 10-25, Safari 5.1-6 */ 
    background: linear-gradient(to left, #232526 , #414345); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 

} 
* { 
    box-sizing: border-box; 
} 
.menu { 
    background-color: #17534b; 
    position: absolute; 
    width: 99.23%; 
    height: 8vh; 
} 

ul.nav { 
    width: 100%; 
} 

ul.nav li { 
    list-style: none outside none; 
    display: inline-block; 
    width: 19%; 
    text-align: center; 
} 

ul.nav li a { 
    display: block; 
    text-align: center; 
    padding: 1.5em; 
    color: #ffffff; 
    letter-spacing: 1px; 
    font-size: 15px; 
    text-transform: uppercase; 
    text-decoration: none; 
} 
ul.nav li a:hover { 
    background-color: #000000; 
    color: white; 
} 
ul.nav li.li-ultimate{ 
    text-transform: uppercase; 
    color: #eef2ff; 
    font-size: 25px; 
} 

section { 
    width: 100%; 
    padding: 0 7%; 
    display: table; 
    margin: 0; 
    max-width: none; 
    height: 100vh; 
} 

.welcome { 
    height: 100vh; 
    background-color: #ffffff; 
} 

.content { 
    display: table-cell; 
    vertical-align: middle; 
} 

.welcome h1{ 
    font-size: 3em; 
    display: block; 
    color: black; 
    font-weight: 300; 
} 

.welcome h2 { 
    font-size: 1.5em; 
    display: block; 
    color: black; 
    font-weight: 200; 
} 

.productsheader { 
    color: #ffffff; 
} 
.productsheader h1{ 
    text-align: center; 
    color: #ffffff; 
    font-size: 3em; 
} 

.products{ 
    height:100vh; 
} 
ul.rig { 
    padding: 5%; 
    list-style: none; 
    font-size: 0px; 
    margin-left: -2.5%; 
} 

ul.rig li { 
    display: inline-block; 
    padding: 10px; 
    margin: 0 0 2.5% 2.5%; 
    background: #ffffff; 
    border: 1px solid #ddd; 
    font-size: 16px; 
    vertical-align: top; 
    box-shadow: 0 0 5px #ddd; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

ul.rig li img { 
    max-width: 100%; 
    height: auto; 
    margin: 0 0 10px; 
} 

ul.rig li h3 { 
    margin: 0 0 5px; 
    text-align: center; 
} 

ul.rig li p { 
    font-size: .9em; 
    line-height: 1.5em; 
    color: #999; 
    text-align: center; 
} 

ul.rig.columns-4 li { 
    width: 22.5%; 
} 

Наряду с соответствующей HTML:

<section class="products"> 
    <div class="content"> 
     <div class="productsheader"> 
      <h1> 
       Our Proudly Presented Products 
      </h1> 
     </div> 
     <ul class="rig columns-4"> 
      <li> 
       <img src="images/1.jpg"/> 
       <h3>Is-it-even-a-cup Cup - $100</h3> 
       <p>Life's true questions.</p> 
      </li> 
      <li> 
       <img src="images/2.jpg"/> 
       <h3>Flute Looking Cup - $150</h3> 
       <p>Looks like a flute.</p> 
      </li> 
      <li> 
       <img src="images/3.jpg"/> 
       <h3>Uterus Looking Cup - $350</h3> 
       <p>Modelled after a woman's uterus. Probably.</p> 
      </li> 
      <li> 
       <img src="images/4.jpg"/> 
       <h3>Artistic Cup - $1</h3> 
       <p>Artsy...ish...</p> 
      </li> 
      <li> 
       <img src="images/5.jpeg"/> 
       <h3>Ancient Cup - $500</h3> 
       <p>Or at least we think its old. Sure does look it.</p> 
      </li> 
      <li> 
       <img src="images/6.jpg"/> 
       <h3>Chinese Poetic Cup - $250</h3> 
       <p>The cup feels empty when you drink, but you're empty when you don't.</p> 
      </li> 
      <li> 
       <img src="images/7.jpg"/> 
       <h3>Dragonfly Cup - $25</h3> 
       <p>Pretty little dragonfly...On a cup.</p> 
      </li> 
      <li> 
       <img src="images/8.png"/> 
       <h3>FIFA World Cup Brazil - $50</h3> 
       <p>Technically a cup...</p> 
      </li> 
     </ul> 
    </div> 
</section> 

Есть ли какие-либо советы, чтобы также предотвратить это происходит в будущем, когда я работаю над другим CSS проектом?

Answer 1

ul.rig { 
    padding: 5%; 
    list-style: none; 
    font-size: 0px; 
    margin-left: -2.5%; 
    width: 960px; // choose your width like 960px 
    margin: auto; // auto work with display : block for centering 
    display: block; // block work with margin : auto for centering 
}