list items not displaying correctly - html

Question

hey guys i am using bourbon neat framework to create a responsive thumbnail gallery. Now it generated the css and somehow when i resize the thumbs seem to be out of position.
here the code i used
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-color: #f4f4f4; }
.galleryContainer {
*zoom: 1;
max-width: 77.0625em;
margin-left: auto;
margin-right: auto;
max-width: 1200px !important; }
.galleryContainer:before, .galleryContainer:after {
content: " ";
display: table; }
.galleryContainer:after {
clear: both; }
.galleryContainer .galleryList {
float: left;
display: block;
margin-right: 2.35765%;
width: 100%;
border: 2px solid red; }
.galleryContainer .galleryList:last-child {
margin-right: 0; }
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0; }
.galleryContainer .galleryList li {
float: left;
padding: 0;
margin: 0;
width: 20%;
padding: 0px; }
#media screen and (min-width: 1338px) {
.galleryContainer .galleryList li {
width: 10%; } }
.galleryContainer .galleryList img {
width: 100%;
height: 100%; }
you can check out the problem here in my demo page here DEMO
Please tell me where i am doing it wrong.
thanks.

Answer 1

It would appear that the float: left that you have set is causing the issue when resizing. Using li elements in this instance I would adopt a display-inline block approach. You will need to add three declarations to the parent in order to remove the margin associated with inline-block elements.
You CSS
.galleryContainer .galleryList li {
float: left; <-- remove this
display: inline-block;
padding: 0;
margin: 0;
width: 20%;
padding: 0px;
font-size: 0px;
}
.galleryContainer .galleryList ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0px; <-- add this
letter-spacing: 0px; <-- add this
word-spacing: 0px; <-- add this
}