Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Additional padding/ margin can't work it out!

Hello I have additional padding/ margin above the header area but I can't figure out where it's coming from. I don't think I can attach a screenshot here but basically there's a block of body colour, then the header area, then the body colour again. I don't know why the body is appearing at the top of the page above the header. Does it make sense? Here's a link to my codepen: http://cdpn.io/ycGvl Thanks :)

David Valles
David Valles
18,487 Points

Becky, Your <h1> is tucked in the <a> link. Try:

<a href="https://twitter.com/rpatey" class="btn">rpatey</a>

Now, maybe in CSS target <header> <a> for styling.

Hope that helps!

  • David
David Valles
David Valles
18,487 Points

Well.. shoot, my code snippets didn't go through.. take two:

Take out your 'h1' elements that are tucked in the 'a' element.

Then, in css, target 'header a' element for styling.

Thanks David. The only thing is, if I do that, what happens if I have other links in the header area? How do I apply the link only too 'rpatey'?

David Valles
David Valles
18,487 Points

Hi Becky,

You could set an id or class to your links. The id is unique, so only works per element. The class is general, so multiple elements can be grouped into a class. Then in CSS, select the id or class and set your style.

Hi David, I've just tried to do what you suggested and got myself in a pickle! Do you have any example code where you've done this? Thanks.

David Valles
David Valles
18,487 Points

Hi Becky... I've got the code for you. Let's see if I can pass it along.

Here's the HTML.

<body>
  <div id="wrapper">
    <div id="header">
      <a href="https://twitter.com/rpatey">rpatey</a>
    </div>
    <div id="body">
      <a href="https://twitter.com/rpatey">
        <img align="center" src="Rebecca Pate.png" height="150px" width="150px" alt="Rebecca Pate">
      </a>
    </div>
    <p>coming soon...</p>
  </div>
</body>

Here's the CSS:

#header {
    font-size: 10em;
    font-weight: bold;
    color: #0066FF;
}

body {
    font-family: 'Raleway', sans-serif;
    color: #0066FF;
    background: #FFFFED;
    text-align: center;
    margin-top: 0px; 
    text-decoration:none;
}

Thanks for this David. I understand it.

Just one very quick question (then I promise that's it!!)...

What is the 'wrapper' for?

David Valles
David Valles
18,487 Points

it's simply a container div that encapsulates your page. then you can apply a global style to the entire page, like setting the width of a page. It's your choice to keep or not, but seems to be a common practice as you see in many code examples.

ah cool, got it thanks so much for your help!

2 Answers

In your CSS element body you have margin-top: 50px; that might just be your problem. :)

Kevin Korte
Kevin Korte
28,109 Points

This is the correct answer.

thank you, that worked.