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

Styling Content > Finishing CSS > Copyright is not centering

I've been coding along with the video and I got to the end of the Finishing CSS video and added this last bit of code:

#copyright {
    border-top: 8px solid #2a0400;
    padding: 10px 0;
    margin: 15px 0;
    text-align: center;

But instead of centering the copyright line it pushed it all to the left and I can't see why it would do that.

6 Answers

Rick Yentzer
Rick Yentzer
5,885 Points

From what you have posted, this looks correct as long as you're closing the copyright declaration. Three things I would check:

  1. misspelling copyright within the html file.
  2. a css error just before the copyright css in your css file.
  3. specificity, meaning somewhere within your css, the text-align: center is being over-ridden.

Hope that helps.

kyle rees
kyle rees
1,480 Points

can you paste the html code your implimenting i have a feeling you might have forgot to use grid_12 around the copyright

Rick: The copyright declaration is closed. I just neglected to copy/paste that in with my original question.

Kyle: grid_12 is there.

I think text-align: center is being over ridden somewhere as Rick suggested. Here's all of my CSS:

body { font-family: 'Nunito', sans-serif; color: #faf3bc; background: #420600 url('img/bg-texture.jpg') repeat; }

a { color:#4fb69f; text-decoration: none; }

h1 { font-size: 1.750em; letter-spacing: -1.5px; }

h2 { font-size: 1.500em; color: #B4C34F; }

.btn { color: #faf3bc; background: #4fb69f url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }

.btn:hover { background-color: #4cc4a7; }

ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }

ul.nav li { float: left; margin-right: 40px; }

ul.nav li a { color: #faf3bc; }

intro {

margin: 50px 0 75px 0;

}

new-cupcakes img {

border: 8px solid #faf3bc;
margin: 0 0 20px 0;

}

featured-cupcake img {

border: 8px solid #faf3bc;

}

copyright {

border-top: 8px solid #2a0400;
padding: 10px 0;
margin: 15px 0;
text-align: center;

}

Nevermind! I found the error in the HTML file. I forgot to add a closing div tag around the "get baking with us" section. It's all better now. Thanks for the help guys!

Rick Yentzer
Rick Yentzer
5,885 Points

That's great Rebecca! That is half the fun of coding. Finding your errors.

One thing that will help is a having a text editor or IDE with syntax highlighting and code hinting. The syntax highlighting can clue you in when an element is not closed, or there is an issue with your css syntax. The code hinting slaps your hand with a ruler when your not using best practices.

I've just had a very similar problem, except instead of pushing it all to the left, mine has all been pushed to the right. Here's my code for the style.css. Any help would be much appreciated.

#copyright {
    border-top: 8px solid #2A0400;
    padding: 10px 0;
    margin: 15px 0;
    text-align: center;
}

And here's the copyright code from index.html

<div id="copyright" class="grid_12">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved</p>
      </div>

No worries now, I found the error in my code and corrected it.