3 column layout

Hi Suzanne,

In the video for the 3 column layout where :nth-child(4n) was added there's a correction in the Teacher's Notes. The correct expression is 3n + 1

4n works out ok for up to 6 images but breaks down after that.

The problem also exists in the 2 column layout which you noticed. I don't believe this is corrected in the course. You need to use :nth-child(2n + 1) for the 2 column layout

In main.css:

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

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

In responsive.css you have to correct the nth-child expression but before that you have to remove the clear property from the items in the 2 column layout because it will mess up the 3 column layout.

responsive.css:

#gallery li {
    width: 28.3333%;
}

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

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