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.

Joseph Zimmerman
Joseph Zimmerman
6,402 Points
Joseph Zimmerman
Joseph Zimmerman
6,402 Points

Hi Holly,

Please post both the HTML and CSS for the project in question.

Are you sure you've linked to your stylesheet properly? just a quick first thought...

If your styles are for sure working try, adding an exaggerated fixed px margin just to see if you have selected the right element. The more specific your selector the better.

Joe

Pablo Rocha
Pablo Rocha
10,142 Points
Pablo Rocha
Pablo Rocha
10,142 Points

Hi Holly - I have formatted your code and marked it as CSS to make it more legible. Checkout the Markdown Cheatsheet for tips on how to format your post.

Happy coding!

2 Answers

dman10345
dman10345
7,109 Points

It's a little hard to tell due to the fact that you didn't offer a snapshot of your workspace and your code is not formatted using the coding boxes. I will attempt to format it and if my attempt is not correct disregard my answer.

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

If this is the case, it is not working because you have not added a comment correctly. You have simply used forward slashes and forgot your asterisks. It should appear as so.

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

gallery li {
    float: left; 
    width: 45%; /*only takes up 45% of width of parent element */ /*<---- Notice the asterisks on both sides ---->*/ 
    margin: 2.5%
    background-color: #f5f5f5; 
    color: #bdc3c7; 
}
Holly Williford
Holly Williford
4,745 Points
Holly Williford
Holly Williford
4,745 Points

Thanks, it turns out I left out a semi-colon after margin. I should have just looked at it with a set of new eyes the next day. Thanks for all your responses!