CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

Code Does What Task Asks For, But It Says It's Wrong

The task asks: "We want three floated images per row. In the media query, create a pseudo-class selector that targets the fourth img child element first, then every third img that follows. Then, add a clear property that clears the left float."

I did this and the images are aligning as such: [] [] [] [] [] [] []
[] [] []

And so on. I'm not sure why It's saying the code is wrong.

style.css
/* Write the CSS in the media query below */

@media (min-width: 607px) {
  img:nth-child(3n+4) {
    float: left;
  }

  img {
    clear: left;
    }
}
index.html
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="thumb-forest.jpg" alt="">
    <img src="thumb-resort.jpg" alt="">
    <img src="thumb-trees.jpg" alt="">
    <img src="thumb-falls.jpg" alt="">
    <img src="thumb-view.jpg" alt="">
    <img src="thumb-sunset.jpg" alt="">
    <img src="thumb-lake.jpg" alt="">
    <img src="thumb-beach.jpg" alt="">
    <img src="thumb-bay.jpg" alt="">
    <img src="thumb-peaks.jpg" alt="">
    <img src="thumb-falls.jpg" alt="">
    <img src="thumb-resort.jpg" alt="">
</body>
</html>

1 Answer

It appears you have the properties reversed. Task 1 is to create a new rule that targets img elements. Then, float the images left. Task 2 is to select (3n +4) then add a clear property that clears the left float.

@media (min-width: 607px) {
  img:nth-child(3n+4) {
    clear: left;
  }

  img {
    float: left;
    }
}