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

HTML How to Make a Website CSS: Cascading Style Sheets Style the Basic Elements

Posted by Sabreal Ealem
Sabreal Ealem
3,288 Points

Select the ID wrapper, set it to a max width of 940 pixels, and then center it on the page using the margin property.

Select the ID wrapper, set it to a max width of 940 pixels, and then center it on the page using the margin property.

4 Answers

Frederico Graciano
Frederico Graciano
Courses Plus Student 2,768 Points

Well to select the ID wrapper you use # means ID and . Classes. This link can help a bit with CSS Selectors or you can look for the css basics course talk about CSS Selectors. http://www.w3schools.com/css/css_selectors.asp

So will be like this:

#wrapper {

max-width: 940px;
margin: auto;

}
Edgar Fernando Escorza
Edgar Fernando Escorza
11,196 Points
Edgar Fernando Escorza
Edgar Fernando Escorza
11,196 Points

Try this :

a { text-decoration: none; }

wrapper{

max-width: 940px; margin: auto; }

Carlos Casciano
Carlos Casciano
10,459 Points
Carlos Casciano
Carlos Casciano
10,459 Points

Why 'center' as a value does not work?

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

margin: auto; is short hand for margin: auto auto auto auto;

margin is a short hand for:

margin-top:

margin-right:

margin-bottom:

margin-left:

Think of it as margin: top right bottom left; margin: auto; sets all 4 values to auto (which will place something directly in the center of the display. You can also set margin: 0 auto; this will set top and bottom to 0 and left and right to auto centering the object horizontally but not vertically.

examples:

example1 {
  margin: auto;
  // Is the same as:
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
}

example2 {
  margin: 0 auto;
  // Is the same as:
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin: -left: auto;
}

example3 {
  margin: 20px 15px 5px 40px;
  // Is the same as:
  margin-top: 20px;
  margin-right: 15px;
  margin-bottom: 5px;
  margin-left: 40px;
}

(Side note: to easily remember the order the shorthand values go in I normally think of a clock starting at 12 and going clockwise from top, right, bottom, left)