Q:

aligning side by side listed items li

Hey guys i have this behavior always happening when i try to align the li beside each others i get a gap in the third or fourth row. I actually don't understand why. 

this is an example of what i always get.
this is part of my code . the ul and li :
li.product {
        width: 9.043478% !important;
        float: left;
        margin: 2% !important;
    }
ul.products {
    margin-left: 0;
    margin-bottom: 0;
    clear: both;
}

A:

Use display:inline-block; instead of float:left; to get it.
Below is working example.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
  margin: 3px;
}
<ul>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
  <li><img src="http://lorempixel.com/100/100"></li>
</ul>

