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

HTML

Three Column Layout Misalignment

Hello guys,

I've been following the video very closely and copied out the code however I'm still getting every 4th image to be misaligned when displaying the page at certain sizes. my code is below:

@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%; }

#gallary li:nth-child(4n) { clear: left; } }

Does anyone see something I'm not seeing? I'm also tried changing the nth-child value to 3n + 1 but that's not changed anything either.

Thank you in advance.

Can you post your complete HTML and CSS so we can take a closer look?

How to take a Workspace Snapshot

How to Post Code:

How to Post Code

After having a few hours away from it I looked back and realised that the word gallery had a typo and so nothing was being applied to it.

Thank you for the link on how to take snapshots of work, I'll be sure to use it in the future.

1 Answer

http://l.d.pr/1gz8X/k3YL0U1z

you have two closing brackets }} hopefully it will help if you remove it.