Images won't smoothly flow into colunms. Suspected word wrap problem.

Hey everyone,

So following Nick's coding, I still run into that problem where, at a certain size, the second column switches to one image, possibly due to word wrapping, for a small area before becoming a full, second column.

I've tried a few different ideas but have not come upon a solution to make it a smooth transition from mobile to desktop.

here is my code for this css.

@media screen and (min-width: 520px) { /************* Two column layout **************/

#primary { width: 50%; float:left; }

#secondary { width: 40%; float:right; }

/************* 3 * 5 = 15% for margins 100% - 15% = 85% for margins 85% / 3 = 28.3333333 **************/

/************* Page: Portfolio **************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(3n+1) ,{ clear: left; }

}

Please note: on the #gallery li:nth-child(3n+1) ~~ I've tried, so far, 2n+1, 3n, 4n, and 4n+1, but have not come upon a solution yet. I'm not quite sure where else to go to at this point.