Problems with "build a three column layout" with un-even images

Hi,

So far, I'm having trouble following this exercise since I have one image that is taller.

following with the codes used in this exercise:

@media screen and (min-width: 480px) {

/* For a two column layout */

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

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

/* 3-layout scheme for our gallery/works page */

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { /* Review your CSS again!!!*/ clear: left; }

}

Here's what it looks like when I expanded the browser size:

and here's what it looks like when I shorten the size of the browser:

the one with the light blue background is the third image while the one with the green background is the fourth...With the example in that video it should be positioned right next to each other...as you can see with my work it's not. Could be because the fourth image is a taller image unlike the others.

When I remove the nth-child css code it appears just the same..

Please help. Thanks