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 Styling Web Pages and Navigation Style the Portfolio

Odd text floating and images out of line

I've followed the code in the video to the best of my ability but I'm still having problems with the formatting of my portfolio. Originally I could not get the float to work at all, the images over lapped strangely and the footer floated with the images. I corrected the overlapping issue by changing #gallery li to gallery img and I fixed the footer by adding clear:both; into my footer's code. Now my images do not float in line with each other and the text that's meant to go under each image is in weird spots. I don't know if my problem is the images being strange sizes, because I only have 3 images, or some small error in my code I over looked. Here's the link to the website: http://port-80-cothpx9yrq.treehouse-app.com/ And here's a snapshot of my current workspace: https://w.trhou.se/zizvx3e5ag

Anain Roibal
Anain Roibal
4,532 Points

All I can find different is the id you have is #gallery img instead of #gallery li. Also gallery is showing orange, weird.

1 Answer

Colin Marshall
Colin Marshall
32,861 Points

Your problem is you have a typo in your img CSS:

img {
  max-width= 100%;
}

Change the equal sign to a colon. Also, change the #gallery img selector back to #gallery li and you will be good to go!

Wow, what a silly mistake. Thank you very much!