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

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

Posted by fen zhou
fen zhou
2,334 Points

Images do not move to the same row.

The images are reduced in size to 45% of the width, but the second image does not move up to the first "row" next to the first image. I tried with both my images and the images provided. Don`t know what is wrong.

/* links */ a {text-decoration:none;} a:link, a:visited {color:rgb(0,0,0);} a:hover {color:rgb(125,125,125);}

img {max-width:100%;}

header { background:rgb(174,170,170); color:rbg(0,0,0); }

header h1 { text-align:center; margin: 0px; font-size:2em; padding-top:5px; }

header nav { text-align:center; margin: 5px; }

/* Main Page CSS*/

OverallPenal {

max-width: 940px; margin:0 auto; padding:0 5%; }

gallery {

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

gallery li {

float left; width:45%; margin: 2.5%; background:#000; }

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points
Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Try to post your code in a more readable way. Check out the Markdown Cheatsheet to see some tips.

1 Answer

Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points
Bogdan Ciocsan
Bogdan Ciocsan
4,861 Points

When you wrote: "gallery li { float left; width:45%; margin: 2.5%; background:#000; }"

You were missing a ":" between float and left. So you should write it as it follows: 

.gallery li { float: left; width:45%; margin: 2.5%; background:#000; }

I am not sure if that is the solution to your problem, but you are more than welcome to try. I can also see that you are using a different class for #wrapper so you should check if the HTML has the same class/id.

Lucas Krause
Lucas Krause
19,924 Points
Lucas Krause
Lucas Krause
19,924 Points

I'm pretty sure it will solve the problem since without the float property the list items are block elements and can't be displayed side by side.