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

Eric Lecours
Eric Lecours
3,478 Points
Posted by Eric Lecours
Eric Lecours
3,478 Points

H2 tag 'Background' doesn't center

Here's my HTML:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Eric Lecours' Profile</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head> <body>

<div class="main-nav">
    <ul class="nav">
      <li class="name">Jane Smith</li>
      <li><a href="#">Home</a></li>
      <li><a href="resume.html">Experience</a></li>
      <li><a href="#">Photos</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>

<header>
  <img src="http://placeimg.com/400/400/people" alt="Drawing of Jane Smith" class="profile-image">
  <h1 class="tag name">Hello, I’m Eric.</h1>
  <p class="tag location">My home is San Carlos, California.</p>
</header>

<main class="flex">
  <div class="card">
    <h2 class="card-title">Background</h2>
    <ul>
        <li>I’m an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs.</li>
        <li>I’m excited to bring my life experience to the process of building fantastic looking websites.</li>
        <li>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</li>
        <li>Fourth list item.</li>
    </ul>
    <h3>A New Subsection</h3>
  </div> 

  <div class="card">
    <h2>Goals</h2>
    <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
    <ul class="skills">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>Ruby</li>
      <li>Rails</li>
    </ul>
    <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
  </div> 

</main>
<footer>
  <ul>
    <li><a href="http://twitter.com/ericlecours" target="_blank" class="social twitter">Twitter</a></li>
    <li><a href="#" class="social linkedin">LinkedIn</a></li>
    <li><a href="#" class="social github">Github</a></li>
  </ul>
  <p class="copyright">Copyright 2015, Jane Smith</p>
</footer>

</body> </html>

Here's my CSS:

/* Global Layout Set-up */

  • { box-sizing: border-box; }

body { margin: 0; padding: 0; text-align: center; font-family: 'Roboto', sans-serif; color: #222; background: #f7f5f0; } /* Link Styles */

a { text-decoration: none; color: #0499ff; } a:hover { color: #6633ff; }

/* Section Styles */

.main-nav { width: 100%; background: black; min-height: 30px; padding: 10px; position: fixed; text-align: center; } .nav { display: flex; justify-content: space-around; font-weight: 700; list-style-type: none; margin: 0 auto; padding: 0; } .nav .name { display: none; } .nav li { padding: 5px 10px 10px 10px; } .nav a { transition: all .5s; } .nav a:hover { color: white }

header { text-align: center; background: url('images/portland.jpg') no-repeat top center ; background-size: cover; overflow: hidden; padding-top: 60px; } header { line-height: 1.5; } header .profile-image { margin-top: 50px; width: 150px; height: 150px; border-radius: 50%; border: 3px solid white; transition: all .5s; } header .profile-image:hover { transform: scale(1.2) rotate(360deg); } .tag { background-color: #efefef; color: black; padding: 10px; border-radius: 5px; display: table; margin: 10px auto; } .location { background-color: #222; color: white; } .card { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; } .card:hover { border-color: #ff99ff; }

ul.skills { padding: 0; text-align: center; }

.skills li { border-radius: 6px; display: inline-block; background: #ff9904; color: white; padding: 5px 10px; margin: 2px; }

.skills li:nth-child(odd) { background: #0399ff; }

footer { width: 100%; min-height: 30px; padding: 20px 0 40px 20px; }

footer .copyright { top: -8px; margin-right: 20px; font-size: .75em; }

footer ul { list-style-type: none; margin: 0; padding: 0; }

footer ul li { display: inline-block; }

a.social { display: inline-block; text-indent: -9999px; margin-left: 5px; width: 30px; height: 30px; background-size: 30px 30px; opacity: .5; transition: all .25s; } a.twitter { background-image: url(images/twitter.svg); } a.linkedin { background-image: url(images/linkedin.svg); } a.github { background-image: url(images/github.svg); } a.social:hover { opacity: 1; } .clearfix { clear: both; }

/* Styles for larger screens */ @media screen and (min-width: 720px) {

.flex { display: flex; max-width: 1200px; justify-content: space-around; margin: 0 auto; }

header { min-height: 450px; }

.nav { max-width: 1200px; }

.nav .name { display: block; margin-right: auto; color: white; }

main { padding-top: 50px; }

main p { line-height: 1.6em; }

footer { font-size: 1.3em; max-width: 1200px; margin: 40px auto; }

}

h3 { color: blue; letter-spacing: 5px; }

.card-title { text-align: center; }

Mister Moody
Mister Moody
48,333 Points

Try appending h2 to the class = h2.card-title

10 Answers

Aminah Iqbal-Elahi
Aminah Iqbal-Elahi
442 Points
Aminah Iqbal-Elahi
Aminah Iqbal-Elahi
442 Points

Basically you need to save your work as you go along. save your html doc and then your css one too. That worked for me

mrtmvakkhs
mrtmvakkhs
Courses Plus Student 758 Points

Thank you!! Very new to HTML and CSS and it completely makes sense.... now...The two need to chain save points together.

Valerie Jean Tagalogon
Valerie Jean Tagalogon
829 Points
Valerie Jean Tagalogon
Valerie Jean Tagalogon
829 Points

I forgot to save my index workspace. I made sure to press CTRL+S to both CSS and Index. Never had a problem since.

Yousef El-Chafei
Yousef El-Chafei
762 Points
Yousef El-Chafei
Yousef El-Chafei
762 Points

I had the same problem. I saved the styles.css thinking that it would save for both the index.html and the styles.css.

Eric Lecours
Eric Lecours
3,478 Points
Eric Lecours
Eric Lecours
3,478 Points

Thanks Mr Moody!. It seems like it was just buggy. I got it to work by changing the - to an _.

Roselyn Choisil
Roselyn Choisil
709 Points
Roselyn Choisil
Roselyn Choisil
709 Points

having the same issue with the background

Samantha Bonnet
Samantha Bonnet
231 Points
Samantha Bonnet
Samantha Bonnet
231 Points

Same here :/ I did everything correctly as the video instructed but no luck

Dylan Xia
Dylan Xia
449 Points
Dylan Xia
Dylan Xia
449 Points

I have the same issue, so I use h2 tag instead of .card-title tag, turns out it worked, haha, it seems funny..

Muchmore Mubaiwa
Muchmore Mubaiwa
422 Points
Muchmore Mubaiwa
Muchmore Mubaiwa
422 Points

I am having the same problem also. its not centering. if you use the H2 tag it centers but it also centers both the "Background" and "Goals" headings, which both happen to be H2 tags. The goal was to edit one and not the other right?

Muchmore Mubaiwa
Muchmore Mubaiwa
422 Points
Muchmore Mubaiwa
Muchmore Mubaiwa
422 Points

I found my problem. i forgot to put the = sign in the html

Jarvis Mott
Jarvis Mott
418 Points
Jarvis Mott
Jarvis Mott
418 Points

Hmm, still having trouble getting my h2 background to center, even with the suggestions. Here's what it looks like based on me following the instructor [https://w.trhou.se/hdr71j9l5p]

html: <main class="flex"> <div class="card"> <h2 class="card-title">Background</h2>

css: .card-title { text-align: center; }

Mike Hatch
Mike Hatch
14,940 Points
Mike Hatch
Mike Hatch
14,940 Points

The only way I got it to work was to put it as:

h2 { text-align: center }