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

Posted by Anne Liu
Anne Liu
657 Points

why my h1 can not move into middle and the font-style is not working?

I am translating a Photoshop into html and css. this is my code and I am wondering why I cannot centre my h1 and h2 but the color function in h1 is working.

<html>
<head>
    <title>Blog</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel='stylesheet' type='text/css' href='css/reset.css'>
</head>
<body>

<header>
    <h1>STOCK PHOTOS THAT DON'T SUCK</h1>
    <h2>A list of places to find the best free stock photos</h2>
    <img class='photo' src='img/icon.jpg' alt='photo'>
</header>
<main>
    <h3>Dustin Senos</h3>
    <h4>Art & DESIGN</h4>
    <h5>22 January 2014</h5>
    <p> Finding great stock photos is a pain. You&#39;re left with either low-res amateur photos, people wearing cheesy headsets, or photos that are out of budget for the project you&#39;re working on. Below is an ongoing list (so bookmark it) of the best stock photo sites I&#39;ve come across.
        <p>
    <ul>
        <li>Little Visuals <a href="http://littlevisuals.co/">http://littlevisuals.co/</a></li>
        <li>Unsplash <a href='http://unsplash.com/'>http://unsplash.com/</a></li>
        <li>Death to the Stock Photo <a href='http://join.deathtothestockphoto.com/'>http://join.deathtothestockphoto.com/</a></li>
        <li>New Old Stock <a href='http://nos.twnsnd.co/'>http://nos.twnsnd.co/</a></li>
        <li>Superfamous (requires attribution) <a href='http://superfamous.com/'>http://superfamous.com/</a></li>
        <li>Picjumbo <a href='http://picjumbo.com/'>http://picjumbo.com/</a></li>
        <li>The Pattern Library <a href='http://thepatternlibrary.com/'>http://thepatternlibrary.com/</a></li>
        <li>Gratisography <a href='http://www.gratisography.com/'>http://www.gratisography.com/</a></li>
        <li>Getrefe <a href='http://getrefe.tumblr.com/'>http://getrefe.tumblr.com/</a></li>
        <li>IM Free (requires attribution) <a href='http://imcreator.com/free'>http://imcreator.com/free</a></li>
        <li>Jay Mantri <a href='http://jaymantri.com/'>http://jaymantri.com/</a></li>
        <li>Public Domain Archive <a href='http://publicdomainarchive.com/'>http://publicdomainarchive.com/</a></li>
    </ul>

    <h6>LEAVE A REPLY</h6>

    <form>
        Your Name:<br>
        <input type='text' name='firstname'><br>        
        Please Enter Your Name:<br>
        <input type='text' name='message'><br>
        <input type='submit' value='submit'>
    </form>

    <div class='share'>SHARE THIS POST</div>
    <h6 class='youlike'>If you like this article, please take a second to share it with the world and help idealUI grow!</h6>

    <ul>
        <li>FACEBOOK</li>
        <li>TWITTER</li>
        <li>PINTEREST</li>
        <li>GOOGLE+</li>
    </ul>

    <div class='previous'>
        <p>PREVIOUS<P>
        <P>HOW TO GET STARTED YOUR OWN CREATIVE STUDIO</P>
    </div>

    <div class='next'>
        <P> NEXT</p>
        <p>ENHANCING USER EXPERIENCE WITH THE WEB SPEECH API</P>
    </div>

</main>

<footer>
    <p>&copy;2015 SAGE Multipurpose Theme. Made by idealUI</p>
    <p>Terms of Use     Privacy policy</p>

</footer>
</body>

</html>

header{
  border: white 1px;
  width: 100%;
  height: 696px; 
  background: url('../img/background.png') no-repeat;
  background-size: 100% 75%;
  background-position: center top;
  text-align: center;
}


.photo{
  width: 75px;
  height: 75px;
}

h1{
  height: 100px;
  text-align: center;
  padding-top: 95%;
  font-size: 48px;
  font-style:bold;
  vertical-align: center;
}

3 Answers

Meg Matty
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Meg Matty
Front End Web Development Techdegree Graduate 22,928 Points
Meg Matty
.a{fill-rule:evenodd;}techdegree seal-36
Meg Matty
Front End Web Development Techdegree Graduate 22,928 Points

You should probably switch your stylesheets in the head of your html so that your reset.css sheet loads first, and so your main.css loads second. Because of the cascading nature of CSS, it may cause problems to load your reset sheet after your custom styles. See stack overflow thread here.. (They talk about normalize.css, which is another reset sheet, but the principle is the same.

Anne Liu
Anne Liu
657 Points

Thank you so much and you just saved me from this. CSS is so detailed oriented. :)

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Agree with David Bath, reset.css is the likely culprit, although I doubt it's setting h1 to inline, that's not its default value... Anne, the purpose of a reset.css-type file is to wipe away all basic (browser-specific) styles, so that you can then build your styles back up in your own CSS. Therefore, you always want to include the reset FIRST in your list of stylesheets. Like:

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/main.css">

Also (not related to css, but important) don't forget to include your DOCTYPE declaration at the top of your file, like:

<!DOCTYPE html>
<html>
...

Hope that solves it, cheers!

Anne Liu
Anne Liu
657 Points

Thank you so much!!!

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

My guess is that your reset.css stylesheet is resetting the style of the h1 to be inline rather than block. Try setting the h1 to display:block and see if the text is centered then.