How many times can I use nth-child in my CSS?

I played around with your code and found that taking out the #gallery li:nth-child(2n+1) {clear: left;} from main.css fixed it.

Yeah, I found out what your problem was. In main.css, you typed:

#gallery li:nth-child(2n+1) { /* line 128 */
    clear: left;
}

And in responsive.css:

@media screen and (min-width: 480px) { /* line 28 */
  #gallery li:nth-child(3n+1) {
      clear: left;
  }
}

I don't understand why you typed in whatever I mentioned in responsive.css (it's not needed; you can remove it), but here is the explanation for whatever you typed in main.css:

I may be wrong, but the float property makes the elements after a specific element, get attracted to the specific element. And what the clear property does, is let any element under the influence of the float property of the specific element, be uninfluenced or stay where ever it is.

For example, the 3rd list item in #gallery is under the influence of the float property of the 2nd list item. So you put the clear: left for every odd list item. So you just have to remove whatever I mentioned above.

You may or may not have understood what I was talking about. So here are some helpful links:

• How nth-child Works | CSS-Tricks
• All About Floats | CSS-Tricks
• The How and Why of Clearing Floats | CSS-Tricks