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

Posted by Holly Williford
Holly Williford
4,745 Points

The margin does not appear to be working for my code. The images are stuck together in the middle. 

#gallery {
 margin: 0; 
 padding: 0; 
 list-style: none; 
}

#gallery li {
  float: left; 
  width: 45%; /*only takes up 45% of width of parent element*/ 
  margin: 2.5%  
  background-color: #f5f5f5; 
  color: #bdc3c7; 
}

Here is my code. I can't seem to get the margin to work.

Alex Chow
Alex Chow
4,521 Points
Alex Chow
Alex Chow
4,521 Points

Perhaps try specifying margin-left: 2.5% or margin-right: 2.5%. Or instead of using margins add padding to create the spacing you need between the images. That usually works for me when I have a list setup.

1 Answer

Aaron Brown
Aaron Brown
4,428 Points
Aaron Brown
Aaron Brown
4,428 Points

I believe your problem maybe that you are missing your ";" after margin in the code posted above.

try:

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

note that this will also add the 2.5% margin to the top and bottom, if you don't want this use margin: 0 2.5%;