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
Brian Hudson
14,785 PointsCan a phantom right margin be caused by something collapsing?
Am trying to do the layout challenge and there is a right margin being applied to my .container div, so that all of the content between the header and footer is being pushed to the left side of the screen. There are no left or right margin rules anywhere in the the style.css sheet...I'm baffled.
9 Answers
Glenré Charl Labuschagné
23,204 PointsGrins and giggles are good!
Try this:
.container {
width: 80%;
margin-left: auto;
margin-right: auto;
}
Glenré Charl Labuschagné
23,204 PointsIt is a "yes and no" answer. Remember CSS stands for cascading style sheets and attribute(s) can cascade down to other elements. Do you perhaps have a way to share your code?
Glenré Charl Labuschagné
23,204 PointsHi Brian,
Are you sure there is margin applied, as the default behavior is to align items to the left. Block items require a width and margin set to auto (for both left and right) to be display "center". See the W3C School website for more details
Brian Hudson
14,785 PointsCharl,
I think so, but...When I open developer tools and inspect the elements the color coding of the space in question indicates that it's a margin. Does that make sense?
Brian Hudson
14,785 Pointsnot sure how to do it without pasting the whole css document...?
Brian Hudson
14,785 PointsI mean I have no idea which snippet to post if that makes sense, since I have no idea what's causing the issue
Brian Hudson
14,785 PointsJust for grins and giggles, I changed the .container rule to
.container { width: 100%; }
Everything is now laid out perfectly, the main content fills the page, nothing's pushed out of whack, etc. Unfortunately that isn't the look I'm going for; when I change it back to .container { width: 80%;}, everything's pushed to the left again.
Brian Hudson
14,785 PointsWell....that worked. That simple step just ended literally three hours of staring and cursing. Thank you. Though, it bugs me that I had to do that in the first place and don't know why. Why wasn't .container {width: 80%;} sufficient to accomplish the same thing?
Glenré Charl Labuschagné
23,204 PointsWonderful, and don't feel frustrated. We all go through this process. The best is to approach any new language as a new toy. You need to play with it, you need to see what happens when you press this button on the back. You need to see where you can bend it. I absolutely encourage you to make mistakes and always ask question because that is how we learn! Remember we all get imposter syndrome when we grow, but again just keep at it and share what you have learned.
About your question: technically your code was fully functional. Your .container is filling the screen 80% with 0 (left and right) margin, which leaves a 20% open gap (to the right). If you added margin-left (20% or auto) it would display (or appear) that the .container is right aligned. Just keep in mind what you are telling the browser to do, with your CSS. Fun fact: you could add a margin-left: 10% and margin-right: 10% to create exactly the same effect. (10% + 80% + 10% = 100% of the screen/viewport). Although margin-left: auto and margin-right: auto is way more lenient as you wont need to update the margin(s) when you change your .container width size (to let's say 65%).
You will find that all of this will become second nature, and then one day you will get to share your knowledge and help others grow.
Brian Hudson
14,785 PointsAll good points, and I look forward to that day. Thanks so much for your help!