CSS CSS Selectors Advanced Selectors :nth Pseudo-Class Challenge

Don't want to float.

I was asked to float images left, so I aplied: float: left; but for some reason it doesn't float left. It stays in the middle. Any ideas how to float it left and how to clear it? I tried to use clearfix.

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

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

  #container::after { 
  content: "";
  display: block; 
  clear: both;
  }
}
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 id="container">
    <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

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,804 Points

Hi Piotr

The reason they are not visually floating left is because you are only selecting the img to float left inside the media query, so it depends what resolution your browser is at whilst doing this challenge.

/* Write the CSS in the media query below */
@media (min-width: 607px) {

  img {
    float: left;
  }

  img:nth-child(3n+4) {
    clear: left;
  }
}

Good Luck

Thank you for a rapid response Liam.