Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Juan Lozano
Juan Lozano
2,042 Points

nth-child being naughty

I have selected the 4nth child on my css but at certain sizes it does go in the right place. The no. 9 picture moves to the far right on the 2nd row and pushes the no. 12 to the 3rd row by itself.

Here's the css:

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


  /**********************************
  TWO COLUMN LAYOUT
  ***********************************/

  #primary  {

    width:  50%;

    float:  left;

  }

  #secondary  {

    width:  40%;

    float:  right;

  }

  /**********************************
  PAGE:  PORTFOLIO
  ***********************************/

  #gallery li  {

    width:  28.3333%;

  }

  #gallery li: nth-child(4n)  {

    clear:  left;

  }

  /**********************************
  PAGE:  ABOUT
  ***********************************/

  .profile-photo  {

    float:  left;

    margin:  0 5% 80px 0;

  }

}

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


  /**********************************
  HEADER
  ***********************************/

  nav  {

    background:  none;

    float:  right;

    font-size:  1.125em;

    margin-right:  5%;

    text-align:  right;

    width:  45%;

  }

  #logo  {

    float:  left;

    margin-left:  5%;

    text-align:  left;

    width:  45%;

  }

  h1  {

    font-size:  2.5em;

  }

  h2  {

    font-size:  0.825em;

    margin-bottom:  20px;

  }

  header  {

    border-bottom:  5px solid #599a68;

    margin-bottom:  60px;

  }

}

2 Answers

Craig Watson
Craig Watson
27,930 Points

Hi Juan,

Sorry for the delay in answering you answer request,

I have taken a look through your code and also moved it over to the project I had done for that course and all seems to work OK.

There is a above, a slight error on the nth-child selector, there is a space between the li: and nth-child().

If the problem is persisting please can you post your main.css for me to run over :)

Craig

Mark VonGyer
Mark VonGyer
21,239 Points
Mark VonGyer
Mark VonGyer
21,239 Points

Code is never naughty, only the coder. You will find if you give an element a clear:left, it will always start a new row.

so if the 4th element is clear:left it will always be the first element of a new row.

so the 12th element will appear on the left of a new row (assuming you are floating left).

I see some float:rights, perhaps a previous element is set to float right?