Floating lithium in the grid leaves an undesirable interval

Question

At a very high level, this is my HTML:

<ul> <li>Item1</li> <li>Item2</li> ... <li>Item21</li> </ul> 

and this is my CSS:

 li { display: block; float: left; margin: 0.3em; padding: 2px; max-width: 10em; min-width: 10em; min-height: 12em; border: 1px solid rgb(230, 230, 230); background-color: rgb(250, 250, 250); } 

My intention is to arrange the list items in a 3x7 grid, but in fact the following happens: the first six elements are displayed exactly the way I want in a 3x2 grid. The seventh, however, is displayed in a line on itself, floating completely to the right of the div container, and the rest of the "line" is empty. Then the pattern continues on the next line. Here is an image of how it looks

My list has exactly 14 elements, so I can confirm that this pattern repeats at least once more. My question is can someone tell me why it is the 7th element that behaves this way and what I can do to fix it.

Answer 1

For some reason, your fifth element is 1px higher than the rest in the screenshot above. This is what causes the seventh element to behave the way it does. Take a look at your code again and see if you are doing something for the fifth element, which makes it be higher than others.