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

HTML

Posted by Casey Siebels
Casey Siebels
783 Points

Adding a centered header

On my services page, I'm trying to add a header above my services... MY SERVICES and center it above the 6 images: http://port-80-2bbts8g40g.treehouse-app.com/portfolio.html

Also the Header is too close to the portfolio image, how do I add space above again to my header?

7 Answers

Erik Nuber
Erik Nuber
20,629 Points

Ok, here is what I did...

html

<img src="img/port.jpg" alt="">
   <h3> MY SERVICES</h3>

I removed the section tags. They were causing the problem. Not sure why but, as soon as I removed them the page started to work as you would expect it to.

css

h3 {
    margin: 0 auto;
    color: #52b9b3;
    font-family: 'Holtwood One SC', serif;
        padding: 10px;
    font-size: 2.15em;
    text-align: center;
}

You can add more margin to the top or bottom, or you can add padding.

Margin is what is outside of the content and padding is what is between the content and the border.

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

You just need to add a text-align center. You can either do this directly to h3 tag or specify it as below.

section h3 {
    text-align: center;
}

As for spacing, you are having some weird behavior. I am not quite sure why you have a main.css and a responsive.css file. You should be able to either add a margin-top or padding-top to the h3 however, it does nothing. I tried doing 

h3 {
   margin: 3em 0; 
}

to set both top and bottom and it just increases the bottom and actually puts the spacing above the <head> of the document.

Erik Nuber
Erik Nuber
20,629 Points

The only other thing I can't actually see is you have a main.css and a responsive.css. There is a section greyed out when I inspect the element that says user agent stylesheet. So something may be causing a problem within that second stylesheet as it overrides the main.css.

Casey Siebels
Casey Siebels
783 Points
Casey Siebels
Casey Siebels
783 Points

The only reason I have the responsive.css is because I was following the 'build your own website' tutorials and he had you set it up. Should I remove the responsive.css?

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Are you doing this in workspaces that you can share or doing it an your own editor? I would like to be able to see all of the code so I can verify what is actually going on.

It is generally best practice to have all your css in one file but, there is no reason you can't separate them.

Casey Siebels
Casey Siebels
783 Points
Casey Siebels
Casey Siebels
783 Points

Does this help? https://w.trhou.se/d7n3c9jbhc

Erik Nuber
Erik Nuber
20,629 Points
Erik Nuber
Erik Nuber
20,629 Points

Yes thank you...Forked it and will look. Get back to you in a few...

Casey Siebels
Casey Siebels
783 Points
Casey Siebels
Casey Siebels
783 Points

Thank you for your time and help!! That fixed the problem :)