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 trialHolly Williford
4,745 PointsThe 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.
1 Answer
Aaron Brown
4,428 PointsI 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%;
Alex Chow
4,521 PointsAlex Chow
4,521 PointsPerhaps 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.