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.

CSS CSS Layout Basics CSS Layout Project Creating and Styling the Layout Containers

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

So the containers I just created will center the layout on the page and keep...?

"So the containers I just created will center the layout on the page and keep it from looking too wide or too narrow, depending on the device or viewport width" (1.08)

How would it be too wide, or two narrow without the container? Can someone give an example on how to see this? Thanks in advance!

2 Answers

Francisco Osegueda
Francisco Osegueda
11,114 Points

If the .container is not added, the content will be spread too wide on large screen and too narrow on small screen. You can see it for yourself if you preview the website before the .container is added with the CSS modifications

Remember that the teacher is taking the "mobile-first" approach in writing the styles for this site.

All of the base styles he is applying in this movie will apply to all sizes of the device screen / viewport width, but with mobile-layout, we want all of the elements stacked on top of each other so that they will be easy to view and interact with on a mobile device.

So, I think he added the container divs to the HTML in this phase mostly as a way just to reinforce to us that these containers will be used ** later ** to change the layouts of these areas (the header and columns) at larger widths.

Right after the comment you quoted, he did mention that he'd be "adding the width and margin styles" later.

Hope this helps!