So basically I am building a full screen food image grid using bootstrap 3. I have used container-fluid and the appropriate columns to define the width of my rows and breakpoints. Each of the columns contains a food image and uses the class - col-lg-2 col-md-3 col-sm-4 col-xs-4

I didn't want a gutter between the images so I removed the left and right padding assigned to the column class which gives me the exact look I want. Now when I resize the grid, it all works fine. However in between screen widths 950px and 980px, the images have a gutter between them vertically. I am unsure whats causing this. Does anyone have an idea?

I have attached a few pictures to illustrate

<http://imgur.com/a/ACSwA>

Thanks

EDIT: <http://www.bootply.com/xXaaLRWKTL> - Bootply. The gutter comes back in the following example around 991px width