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 CSS Basics (2014) The Box Model Margins

Andrew Dank
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrew Dank
Front End Web Development Techdegree Student 2,954 Points
Posted by Andrew Dank
.a{fill-rule:evenodd;}techdegree
Andrew Dank
Front End Web Development Techdegree Student 2,954 Points

Confusion about "margin: auto"

During the end of this video, the primary and secondary content divs were set to "margin-auto" and were centered. But the wildlife div was centered as well. Why was the wildlife div centered when it wasn't assigned a "margin: auto"? All it was assigned in style.css was "margin:105px 0 60px"

1 Answer

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

The wildlife div is a child element of the primary.content div that has been centered. By default, a div takes up the full width of its parent container, so therefore, it appears centered because its parent has been centered and they both have a transparent background. Add a 1px red border to both the div elements to see what I mean. If the wildlife div element had a margin auto and a fixed width, it would get centered again inside of its parent.

The auto value makes the browser automatically calculate the margins for that element based on its width.