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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

J V
J V
3,414 Points
Posted by J V
J V
3,414 Points

When applying the 3 column layout concept, the following does not work.

Instead of applying a 3 column layout, I would like to apply a 4 column layout. I have written out the math below.

4 (columns) * 5 (2.5 margin space on left/right) = 20%

100% (total space) - 20% (margin space) = 80%

80% (space for photos) / 4 (columns) = 20% (for each photo)

When I apply 

#gallery li
  {
    width:20%;
  }

the columns do not change to 4, instead they remain at 3.

Am I doing something wrong?

Jake Lundberg
Jake Lundberg
13,965 Points
Jake Lundberg
Jake Lundberg
13,965 Points

Would need to see more of your code to be able to answer accurately. I think you may be confusing things in your math.

2 Answers

Jason DeValadares
Jason DeValadares
7,190 Points
Jason DeValadares
Jason DeValadares
7,190 Points

adjusting for 4 columns would have all the li's float left, and they would only be seen floating if the resolution was wide enough to handle it. You may have to downsize the image sizes for this to work. Try downsizing the the images to a lower percentage and see if that helps. If you have the nth-child CSS in place from this course you'll need to change it to the 5nth instead of 4nth.

J V
J V
3,414 Points
J V
J V
3,414 Points

Hi Jason and Jake,

Thank you for your answer. I managed to find the problem. One of the photo margins was off-set.