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 trialEric Lecours
3,478 PointsH2 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; }
10 Answers
Aminah Iqbal-Elahi
442 PointsBasically 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
Courses Plus Student 758 PointsThank you!! Very new to HTML and CSS and it completely makes sense.... now...The two need to chain save points together.
Valerie Jean Tagalogon
829 PointsI 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
762 PointsI 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
3,478 PointsThanks Mr Moody!. It seems like it was just buggy. I got it to work by changing the - to an _.
Roselyn Choisil
709 Pointshaving the same issue with the background
Samantha Bonnet
231 PointsSame here :/ I did everything correctly as the video instructed but no luck
Dylan Xia
449 PointsI have the same issue, so I use h2 tag instead of .card-title tag, turns out it worked, haha, it seems funny..
Muchmore Mubaiwa
422 PointsI 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
422 PointsI found my problem. i forgot to put the = sign in the html
Jarvis Mott
418 PointsHmm, 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
14,940 PointsThe only way I got it to work was to put it as:
h2 {
text-align: center
}
Mister Moody
48,333 PointsMister Moody
48,333 PointsTry appending h2 to the class = h2.card-title