Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

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

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

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

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

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!