When my page is mobile size, the third item is still shifted right...?

I was having the same problem with mine and then I remembered the code is only targeting screen sizes greater than 480px; so it doesn't fix the problem when viewing mobile size. I don't know if this is the correct way to do this but I added this to the top of my responsive.css and it solved the problem:

@media screen and (max-width: 480px) {
    #gallery li:nth-child(2n + 1) {
    clear:both;
  }
}

have you tried to put the #gallery li:ntn-child(n+1) { clear:left; } inside the media queries? i think the ntn-child code are used on tablet and desktop size on the tutorial.

You can try a clear: both or if all else fails also use the :after suedo selector like this html #gallery li:nth-child(n+1):after { content: " "; clear: both; }. If you can give a sample of the code you are using that would be a little more helpful.

Have you tried removing the float right or have you made sure you are selecting the right Dom element? Open up the Javascript console by pressing f12 then put in your selector to make sure you are targeting the right element in the Dom.

This might be a bit sloppy, but building on the comments here, this is what seemed to fix it for me, while still maintaining the fix for the three-column layout as well.

At top of responsive.css add:

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

Then in the 480px media query, add that same exact selection (2n+1), and set clear to NONE, overriding that "clear left" and instead telling it not to clear anything for every 2n+1 that was applied earlier, since it is not relevant to this layout, then moving on to the clear:left for every (3n+1) as has already been explained. So it looks like:

#gallery li:nth-child(2n + 1) {
      clear: none;
  }

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

I'm a newbie and there might be a much more elegant way of doing it, but this seems to work across all the resize thresholds...