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 CSS Selectors Going Further with Attribute Selectors and Pseudo-Classes :only-child and :empty

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Why does my h1 appear on the left of the browser?

Hi.

I just want to know please why my h1 appears on the left, yet Guil's appears in the centre.

I'll paste my HTML below:

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            color: #616161;
            padding: 40px 0;
        }
        ul {
            list-style: none;
            width: 50%;
            margin: auto;
        }
        li {
            border-bottom: 1px dotted #40918c;
            padding: 15px 10px;
        }
    </style>
</head>
<body>
  <h1>My List of Items</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>
</body>
</html>

And my CSS:

/* Structural Pseudo-classes------------------ */

li:first-child {
  background: #52bab3;
  color: white;
}

li:last-child {
  border: none;
}

li:only-child {
  color: #52bab3;
  font-size: 1.5em;
}

I'd appreciate any help.

Sean :-)

4 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Sean,

I think only the staff that worked on this video is going to know for sure what happened with this but I have a possible explanation.

I downloaded the project files for this video and I compared "start/index.html" with "final/index.html" inside the subfolder for this video lesson.

The starter file did not have the h1 center styling in the internal stylesheet but the final file did .

At the point where Guil added the h1 in the html the styling had to already be in place.

My guess is that the video doesn't show this being added in. It was either already there at the start or the addition of the h1 styling was removed from the video during editing.

Mark Cooper
Mark Cooper
2,487 Points

Thanks for asking this question, and for your suggested answer. Appreciated. - Mark

Christopher Cooper
Christopher Cooper
2,026 Points
Christopher Cooper
Christopher Cooper
2,026 Points

Might be a little late, but to get the h1 to center add the following to your CSS:

h1 { text-align: center; }

Shaun Kelly
Shaun Kelly
35,560 Points
Shaun Kelly
Shaun Kelly
35,560 Points

Hi Sean,

Add the following to your Css:

body {text-align: center;}

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Shaun.

I tried your suggestion and it moved everything to the centre, including the list items, so I changed body to h1 and only the heading was centred. It's only the h1 I want to centre. I don't understand why Guil didn't have to type this syntax into his CSS. He didn't mention h1 {text-align: center;} in the video (maybe because the CSS Basics course covered it).

Anyway, I do appreciate your input and I hope you're not discouraged from helping me in the future.

Cheers

Sean :-)