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) Understanding Values and Units Text Styles

Kenneth Simpson
Kenneth Simpson
1,162 Points
Posted by Kenneth Simpson
Kenneth Simpson
1,162 Points

Help with the .primary-content and .main-header content?

I am not understanding why he is typing

.primary-content, .main-header {
text-align: center; }

why would you not just write .main-header { text-align: center; }

I am confused because only the header was centered after that was entered into workspace? Why was the primary content area of the html document not changed also? Thanks.

3 Answers

Stephen Bone
Stephen Bone
12,359 Points
Stephen Bone
Stephen Bone
12,359 Points

Hi Kenneth

From the little of the video I've just watched the .primary-content was already centred so maybe that was why you didn't notice a further change. So if you look at the text below the header they are all centre aligned on the video so I'm assuming yours is the same.

Hope it helps!

Stephen

Alexander Ferguson
Alexander Ferguson
1,512 Points
Alexander Ferguson
Alexander Ferguson
1,512 Points

Hey Kenneth

The reason the primary content wasn't centered was because earlier we set the primary and secondary content to have a width of 60%. Thus it will only take up 60% of the screen. If you were to change that width to 100% it would then center the content on your screen.

Alexander Mooney
Alexander Mooney
7,321 Points
Alexander Mooney
Alexander Mooney
7,321 Points

To elaborate further on Alexander Ferguson's statement:

The text within .primary-content and .secondary-content is centered, but both the .primary-content and .secondary-content are set to only take up 60% of the page. Since no margins are set for either class, they are by default on the left side of the page. If you were to set the margin like so:

.primary-content,
.secondary-content {
  width: 60%;
  margin: 0 auto;
}

It makes it so that the left and right margins are the same, consequently aligning the content.