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

Design Web Typography Final Project: Create a Typographic Site Header and Summary

How did I goof up a 'simple' text-align: center; CSS method? My h1 and h2 won't center in the header

CSS for Typography: Zen Gardens project --

/* css Zen Garden default style v1.02 / / css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/ */

/* Your images should be linked as if the CSS file sits in the same folder as the images. ie. no paths. */

/* Colors

Primary White: #f6f4ec; Green: #9bc152; Navy-Gray: #282932;

Secondary Medium Green: #81a53d; Dark Green: #708647; Grays: #8b8d9b and #6d6f81; Blues: #6b6d85 and #47495d; Dark Navy: #1b1b21; */

/* Webfonts */ @import url (http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,400italic|Alegreya+Sans:400,400italic|Alegreya:400italic,900italic);

/* Basic Elements */ html { margin: 0; padding: 0; } body { font-family: 'Alegreya Sans', Verdana, Tahoma, sans-serif; font-size: 1.25em; line-height: 1.6; margin: 0; padding: 0; color: #282932; background: #f6f4ec; }

p { margin: 0; }

p + p { text-indent: 1.5em; }

h1,h2,h3,h4,h5,h6 { font-family: 'Alegreya', Georgia, serif; font-weight: normal; font-style: italic; color: #95c152; }

h1 { font-size: 3.157em; line-height: 1.1; }

h2 { font-size: 2.369em; line-height: 1.15; margin: 0 0 .54em; }

h3 { font-size: 1.777em; line-height: 1.2; margin: .9em 0 .62em; }

ul { margin: 0; }

li { margin: 0; }

a:link { text-decoration: none;

} a:visited { text-decoration: none; }

a:hover, a:focus, a:active { text-decoration: none; }

abbr { font-family: 'Alegreya Sans SC', 'Alegreya Sans', Verdana, Tahoma, sans-serif; <!--text-transform: lowercase;-->

::selection { }

/* Specific Styles */

header { padding: 10em 4%; text-align: center; }

header h1 { }

header h2 { }

header abbr { }

.summary { }

.summary p { }

.summary p + p { }

.summary a { }

.summary a:hover { }

.preamble, .requirements { }

.preamble h3, .requirements h3 { }

.preamble p, .requirements p { }

.requirements a { }

.requirements a:hover { }

.requirements p:last-of-type { }

.requirements p:last-of-type a { }

.requirements p:last-of-type a:hover { }

.benefits { }

.benefits h3 { }

.benefits p { }

.explanation, .participation { }

.explanation { }

.participation { }

.explanation h3, .participation h3 { }

.explanation p, .participation p { }

.participation h3 { }

.participation a { }

.participation a:hover { }

.participation p:last-of-type a:nth-of-type(1), .participation p:last-of-type a:nth-of-type(2) { }

footer { }

footer:after { }

footer a { }

footer a:nth-of-type(even) { }

footer a:hover { }

aside { }

.sidebar { }

.design-selection { }

.design-archives, .zen-resources { }

.sidebar h3 { }

.sidebar ul { }

.sidebar li { }

.sidebar a { }

.sidebar a:hover { }

.design-selection a:nth-of-type(even) { }

.sidebar a:hover:nth-of-type(even) { }

.zen-resources h3 { }

.design-archives a, .zen-resources a { }

/* Media Queries */

@media (max-width: 64em) { body { }

.summary p { }

.explanation h3, .participation h3, .preamble h3, .requirements h3, .benefits h3 { }

.explanation p, .participation p, .preamble p, .requirements p, .benefits p { } }

@media (max-width: 54em) { body { }

.summary p { } }

@media (max-width: 47em) { header h1 { }

header h2 { }

.explanation, .participation { } }

@media (max-width: 34em) { header { } header h1 { }

header h2 { }

.summary p { }

.summary p + p { }

h3 { }

.design-selection { }

.design-selection li:last-of-type { }

.design-archives { }

.zen-resources { } }

@media (min-width: 47em) { .benefits { }

.benefits h3 { }

.benefits p { } }

@media (min-width: 54em) { .benefits { } }

@media (min-width: 64.125em) { .benefits { }

aside { }

aside:hover { }

aside:after { }

aside { } }

@media (min-width: 94em) { body { }

.summary p { }

.benefits { }

.explanation h3, .explanation p, .participation h3, .participation p { } }

@media (min-width: 120em) { body { }

.summary p { }

.preamble h3, .preamble p, .requirements h3, .requirements p { }

.explanation h3, .explanation p, .participation h3, .participation p { }

.benefits { } }

/* Animations / <eof> ** My <header> text, h1 and h2 won't align center ***

2 Answers

Steven Parker
Steven Parker
229,644 Points

It's hard to read unformatted code, but around what appears to be line 37, there is an HTML-style comment that is not appropriate for CSS:

<!--text-transform: lowercase;-->

Also, and perhaps more importantly, the rule this seems to be part of ("abbr") does not have a closing brace.

For future questions, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

Gerhard Driedger
Gerhard Driedger
7,486 Points

Try using text-align on the h1 & h2 elements, rather than on the header element