How to remove the default margin of inline li elements?

Try float: left; That will force your list items to be rendered without the extra whitespace.

li {
    display: inline-block;
    padding: 10px;
    border: 1px solid red;
    margin: 0;
    float: left;
}

Combining all lis in a single line solves the problem. But if you want to know more techniques to remove those margins you can visit : http://davidwalsh.name/remove-whitespace-inline-block.

It lists these techniques:

1. No Space Between Elements

<ul><li>Item content</li><li>Item content</li><li>Item content</li></ul>

2. font-size: 0 on Parent

.inline-block-list { /* ul or ol with this class */
font-size: 0;
}

.inline-block-list li {
font-size: 14px; /* put the font-size back */
}

3. HTML Comments

<ul>
 <li>Item content</li><!--
 --><li>Item content</li><!--
 --><li>Item content</li>
</ul>

4. Negative Margin

.inline-block-list li {
margin-left: -4px;
}

5. Dropping Closing Angle

<ul>
 <li>Item content</li
 ><li>Item content</li
 ><li>Item content</li>
</ul>