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 Adding Pages to a Website Add a New Page

Matt Young
Matt Young
3,565 Points

Picture will not center correctly no matter what i do please help.

http://codepen.io/anon/pen/ZQNVRK This is my code on this outside source. Although when i apply the same code on the treehouse workshop it looks like this http://port-80-1vm4k7vvd3.treehouse-app.com/

PLEASE. HELP.

Steven Parker
Steven Parker
231,007 Points

The workshop preview only exists while you are running the workshop. To share a workshop, you must select "snapshot" and then share the link to that.

Nick Martin
Nick Martin
11,299 Points

Your images aren't showing up in your codepen, which is likely a src issue since it looks like they're linking to Treehouse, but it also looks like you gave the id of "memes" to a div that holds the list items of the images themselves. The images don't really have any CSS formatting and the the #gallery li rule has them floating left with an all-around margin. I would try perhaps not floating them and give them a margin: 2.5% auto. This should center them horizontally in their containers. I would also suggest a wrapper div to set the total content width as it looks like you were using the smaller divs to contain your page width.

Mark DeArmond
Mark DeArmond
15,233 Points

Your have your images nested in anchor tags. By default, they are set to display: inline;. Try the code below to center them.

#gallery li a{
  display: block;
  text-align: center;
}