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 Introduction to HTML and CSS (2016) Make It Beautiful With CSS Select and Style by Class

Posted by Lajla Dzogovic
Lajla Dzogovic
216 Points

Hello I have tried everything and I still can not center " Background".

I can center Goals But not Background. I can only center Background together with goals, when I am not separating them. Can you please help??

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

It's a bit tricky to give exact guidance without seeing the code you have tried.

But it sounds like you're being asked to practice using class CSS selectors.

Class selectors look for elements that use class attributes.

<p class="center">Text</p>

And the class character is the full stop (period) .`

.center {

    text-align: center;
}
.

The text for "Background" and "Goals" is probably contained in a heading element. So make sure these elements have a class attribute in them and use that attribute value to select them in CSS.

Lajla Dzogovic
Lajla Dzogovic
216 Points

Thank you very much, but this is exactly what i have done and it still does not work. Whena i write it like this for the "GOALS" it works and I can move it, but it doesent work with "BACKGROUND". I hvae tried changeigng the name of the class but it still doesent work.

Paul Mamac
seal-mask
.a{fill-rule:evenodd;}techdegree
Paul Mamac
Full Stack JavaScript Techdegree Student 2,622 Points
Paul Mamac
.a{fill-rule:evenodd;}techdegree
Paul Mamac
Full Stack JavaScript Techdegree Student 2,622 Points

I changed the text-align in the class card to center it. It was sort of side-stepping it, and apply-all approach, but I'll fix it when I need to haha.

Paul Mamac
.a{fill-rule:evenodd;}techdegree
Paul Mamac
Full Stack JavaScript Techdegree Student 2,622 Points

I ended up changing it and creating a new class to keep it organized. But for some reason, it did not work the first time because the class card was on top of it. The solution I did was to put the new class on top of .card in the CSS tab. 

.center {
  text-align: center;
}
.card {
  margin: 30px;
  padding: 20px 40px 40px;
  max-width: 500px;
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}
Presian Nenov
Presian Nenov
339 Points
Presian Nenov
Presian Nenov
339 Points

I had the same issue. I fixed it by saving index.html before going to styles.css, turns out you have to save each tab seperately.