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

Sunny Patel
Sunny Patel
791 Points

What CSS rule should you use if you want to move the header just a few spaces to the right?

In this video you learn how to center your header. My question is what CSS rule should you use if you want to move the header just a few spaces to the right, and not in the center?

4 Answers

Kallil Belmonte
Kallil Belmonte
35,561 Points

Do you already try:

text-align: right; ?

Sunny Patel
Sunny Patel
791 Points

I don't want to move it completely to the right. I think as default, all the content appears on the left of the page. I am trying to figure out what rule to apply if I want to move it a few spaces to the right.

Kallil Belmonte
Kallil Belmonte
35,561 Points

Hmm, and what about select the first menu item and set margin-left: (number)px; - until it adjust? If you want, post your html e css code, so I can check it on my browser

Sunny Patel
Sunny Patel
791 Points

Here is part of the HTML Code. I closed it up so it should just show you my name: !DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sunny Patel | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id=logo> <h1>Sunny Patel</h1> <h2>Designer</h2> </a> </header> </body> </html>

and the CSS Code is:

logo {

text-align: center; margin: 0;

  • what should I do move the header just a few spaces to the right?
James Alker
James Alker
8,554 Points

You could add the following rule to the CSS:

header {

padding-left: 10px;

}

This will push the 'header' contents to the right by 10px.

Sunny Patel
Sunny Patel
791 Points

Thank you James!

Kallil Belmonte
Kallil Belmonte
35,561 Points

For what I saw both "margin-left" or "padding-left" (as James says) will work in your header. So you just need to adjust how many pixels you will want.

Sunny Patel
Sunny Patel
791 Points

Thank you Kallil!