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

Posted by Emmanuel Tweneboah
Emmanuel Tweneboah
Courses Plus Student 3,206 Points

Some properties within descendant selectors is not working

Please why is it that all the properties within this descendant is working perfectly but the text-align: center; is not working. Please have a look at my code

<header id="top" class="main-header"> <span>Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header> ...................................................................................... header span { color: white; font-size: 20px; text-align: right; }

3 Answers

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

aha, <span></span> is an INLINE element. in order to achieve what u want you need to give it a display of block. like this 

header span { 
   color: white; 
  font-size: 20px; 
  text-transform: capitalize; 
  display: block;
  text-align: center;
}
Emmanuel Tweneboah
Emmanuel Tweneboah
Courses Plus Student 3,206 Points

Thank you very much. It worked perfectly and I have now know the difference between inline and block element

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

i think it's because i can see a 

text-align: right;

in your code , just change that -right- to -center- and it should be fine ;)

Emmanuel Tweneboah
PLUS
Emmanuel Tweneboah
Courses Plus Student 3,206 Points
Emmanuel Tweneboah
Emmanuel Tweneboah
Courses Plus Student 3,206 Points

This is my HTML Code

<header id="top" class="main-header"> <span >Journey through the Sierra Nevada Mountains</span> <h1>Lake Tahoe, California</h1> </header>

This is my css code. header span { color: white; //This worked
font-size: 20px; //This worked
text-transform: capitalize; //This worked
text-align: center; //But this did not worked
}