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.


Why doesn't my grid.css work correctly?

<div class="container"> </div>


.grid_1 {width:65px;} .grid_2 {width:150px;} .grid_3 {width:235px;} .grid_4 {width:320px;} .grid_5 {width:405px;} .grid_6 {width:490px;} .grid_7 {width:575px;} .grid_8 {width:660px;} .grid_9 {width:745px;} .grid_10 {width:830px;} .grid_11 {width:915px;} .grid_12 {width:1000px;}

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12, { margin:0 20px 10px 0; float:left; display:block; }

.alpha{margin-left:0px;} .omega{margin-right:0px;}

.container { width: 1000px; margin: auto; }

/* I have been messing with this for an hour or two and still can't seem to align the grid correctly. I have a picture I want to align to the left and a unordered list I want to align right. What is wrong with my code because I can't figure this out =( */

5 Answers

There could be a number of things going on. For one, you could have a large picture that simply refuses to be contained in it's own grid. Or you may be adding margin or padding to one side of a gridded element and it's forcing the other grids on that row to the next line. You also may have forgotten to wrap all of your content in a div with the class of container_24. Or you may accidentally be using IDs instead of Classes. I can't really tell without seeing your html. Your grid.css looks pretty spot on.


Let's see your HTML so we can figure out what's going on. A screenshot would be good too.

Good news is good =)

editing my code one minute...

Thanks for the comments guys... I found the html coding and css grid structure on codepen.io and found out my HTML coding was off. I made the corrections and It worked.