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 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
Posted by Learning coding
.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
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

laurasammons
laurasammons
16,723 Points
laurasammons
laurasammons
16,723 Points

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!