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
Ben Eisenstein
212 PointsProblem w/ Centering
I am currently on the Websites / Working with Grids stage. I follow along with the videos with Sublime Text and everything had been working perfectly until now.
At about 3:00 into the video, it shows how to center the content on the sample page. I follow everything exactly how Nick says to do it, but my content is not centering. It just stays how it is, flush left.
I don't want to move on until I get this part figured out. Can anyone help? Thanks!
Ben Eisenstein
212 PointsSure, here it is:
/* Width: 1000px # Columns : 12 Column width: 65px Gutter : 20px
*/ .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; }
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
3 Answers
Chase Lee
29,275 PointsDid you use?
margin: auto;
J.R. Sedivy
2,545 PointsStrange, I am having the same issue as Ben.
James - I'm assuming this is the "margin: auto;" in the "grid.css" file? If so, it's there but the text remains aligned to the left without being centered. Any other ideas?
Chase Lee
29,275 PointsIt happens to me a lot, where the margin: auto; doesn't work. So I usually just eyeball it. But lets have:
Nick Pettit and/or Guil Hernandez tell us if there is a better way.
J.R. Sedivy
2,545 PointsThanks - Even tried eyeballing it without success. Digging through the other forum topics as well to see if I can track anything down...
J.R. Sedivy
2,545 PointsAh, finally figured it out. Silly mistake. My references to the CSS files were pointing to the wrong location as I had since moved them. Problem solved. Thanks again!
Ben Eisenstein
212 PointsJ.R. can you tell us specifically how you fixed this?
J.R. Sedivy
2,545 PointsSure. First I tried altering the width of the .container portion of the grid.css file, but regardless of value entered, I did not see a change after refreshing the browser. This led me to believe there may have been a problem with the link. I double checked my link to grid.css and it was copied exactly as it should be. The only challenge was that I forgot that I created a folder on my desktop and placed the project files into it, which in essence changed the location of the grid.css file. Upon removing the css folder (and files) from the newly created folder and placing it directly on my desktop, it corrected the problem as the link was now pointing to the correct location.
Guil Hernandez
Treehouse TeacherThanks J.R. Sedivy.
Ben Eisenstein – Your CSS looks good, so the issue may be in your <link> path or file structure. Make sure that the CSS files are linked correctly and that they're in a folder named CSS.
Ben Eisenstein
212 PointsThat worked J.R. Sedivy and Guil Hernandez . Thanks for making my day.
J.R. Sedivy
2,545 PointsNo problem, thanks to everyone for helping me work through this. Definitely much better than working in isolation!
Guil Hernandez
Treehouse TeacherYou're very welcome. Keep up the good work, Ben Eisenstein and J.R. Sedivy!
Ben Eisenstein
212 PointsYep, I have margin: auto; included but it is still not centered.
Thanks for the feedback, Chase.
Guil Hernandez
Treehouse TeacherGuil Hernandez
Treehouse TeacherHi Ben Eisenstein,
margin: auto;ormargin: 0 auto;should center the div as long as you've set a width. Can you please post the CSS you're using so we can take a look? Thanks!