li:nth-child(4n) is not the correct selector for scalability.

This is based upon the layout we are using (three columns). The element numbers are as follows within the columns of the video:

Element 1 Element 2 Element 3

Element 4 Element 5

But if this is scaled further, it looks like this:

Element 1 Element 2 Element 3

Element 4 Element 5 Element 6

Element 7 Element 8 Element 9

Element 10 Element 11 Element 12

The issue is that (4n) will not account for element 7 or 10 shown above, which set the level of the row for their following elements.

If we want to make sure that each new row will clear the "word-wrapping" issue of the previous row, while using three columns, then this selector should be used: #gallery li:nth-child(3n+1) { /css changes/ }

So on iterations:

1. n=1 then (3(1)+1) = 4 so the 4th element gets selected.

2. n=2 then (3(2)+1) = 7 so the 7th element gets selected.

3. n=3 then (3(3)+1) = 10 so the 10th element gets selected.

Hope that makes sense!

For two columns w/ float use :nth-child(2n+1). For four columns w/ float use :nth-child(4n+1). Maybe you can extrapolate extra things from there.

Good luck out there.