html - Setting widths of elements in percentages for responsiveness -

if set container (div) containing 4 items 100% , make elements (li) 25% no margins or paddings on of elements, shouldn't each of elements fit on 1 line in container? why not , why last 1 run onto next line?

html (jsfiddle)

<div>     <ul>         <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>         <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>         <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>         <li><img src="http://static.comicvine.com/uploads/original/2/29462/582674-kenny.png" /></li>     </ul> </div> 

css

* {     margin: 0;     padding: 0;     }  div {     width: 100%; }  li {     display: inline-block;     list-style: none;     width: 25%; }  img {     width: 100px; } 

link fiddle: http://jsfiddle.net/arshadmuhammed/n4e1ncvh/1/

add float:left li

li {     display: inline-block;     list-style: none;     width: 25%;     float:left; } 

answer second question:
2) instead of giving margin, give border & box-sizing li inorder spacing between them.

li {     box-sizing:border-box;/*new*/     list-style: none;     width: 25%;     float:left;     background:red;     border:20px solid white;/*new*/ }