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 How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Kiersten Backs
Kiersten Backs
602 Points
Posted by Kiersten Backs
Kiersten Backs
602 Points

Why is my text not centering?

I'm not sure why my text is not centering... here is my html and css. 

  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Kiersten Backs</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfoloio</a>
          </li>
          <li><a href="about.html">About</a>      
            </li>
          <li><a href="contact.html">Contact </a>
            </li>
        </ul>
      </nav> 
    </header>

a {
  text-decoration: none; 
}

#wrapper {
  max-width: 940px; 
  margin: 0 auto;
  padding: 0 5%;
}

#logo {
  text-align: center; 
  margin: 0; 
}
Craig Schlegel
Craig Schlegel
12,268 Points
Craig Schlegel
Craig Schlegel
12,268 Points

When you select a class or an id you have to add a "." before the class or "#" for id names. Here is an example:

#logo {
  // logo id styles
}

.logo {
  // logo class styles
}

4 Answers

Tomy Lim
Tomy Lim
4,571 Points
Tomy Lim
Tomy Lim
4,571 Points

Greetings,

h1 and h2 are centered, are you trying to center the nav?

Fred Sites
Fred Sites
11,151 Points
Fred Sites
Fred Sites
11,151 Points

Where is your Id #wrapper in the html? You're applying the css right to #wrapper but I'm not seeing that in the html. If you want the #logo text to be centered it is centered inside of what contains it. In your case is the header. So make sure that is centered on the screen, then center your text within #logo.

Tomy Lim
Tomy Lim
4,571 Points
Tomy Lim
Tomy Lim
4,571 Points

Greetings,

h1 and h2 are centered, are you trying to center the nav?

Kiersten Backs
Kiersten Backs
602 Points
Kiersten Backs
Kiersten Backs
602 Points

for some reason it is only centering on my screen after I click on the header link... it does not show up originally centered.

Alzee Inc
Alzee Inc
5,894 Points
Alzee Inc
Alzee Inc
5,894 Points

well same here, i typed the same code as the video propose and for some reason is not working at all

Kiersten Backs
Kiersten Backs
602 Points
Kiersten Backs
Kiersten Backs
602 Points

I am not sure why it was not working before.. but now it is working.