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 How to Make a Website Customizing Colors and Fonts Resize Text

Justin Gingrich
Justin Gingrich
5,586 Points

top of h1 cut off?

When my h1 line-height is .08 it cuts off the top of h1 also when my h2 margin is -5 the spacing looks much closer then his. If i change h1 line height to 1.08 and h2 margin to -15 everything looks right. Is that because I'm using a different font or did i miss something? thanks!

Hi Justin,

Can you post your code? Thanks!

Cisco Rendon
Cisco Rendon
Courses Plus Student 36,045 Points

It may be a font selection but you could create some space between the h1 & h2's if you put some margin or padding between them. Also make sure you are not confusing the unit of measures between pixels & em's. There is a huge difference between the two.

Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey Justin,

This might be of use to you if you're wondering how to post code in the forums or share a snapshot of your code:

How to Post Code on the Forums

There are two ways to share your code on the forums here, excluding using external tools from outside of Treehouse.

Method One

The first method is to use a series of three ` (backticks, located at the top left of the keyboard) without any spaces on one line, paste all of your code starting on the second line, then closing the code block with a second series of three backticks. Take a peek at the link for the "Markdown Cheatsheet" located above the "Post Answer" button anytime you're about to post a comment or answer. Using this method, the code will look like this:

```css
(code here)
```

Method 2

The second method is a little more convoluted, but it lets us look at your entire project and make our own copy to try fixing issues. I'll order the steps since it can be a little confusing the first time around:

  1. Open the workspace you're having trouble with.

  2. On the menu bar located to the left of the "Preview Workspace" button is the "Snapshot Workspace" (camera icon), click that.

  3. A popout will appear with another button that says "Take Snapshot", click that.

  4. It should create a new snapshot, which will appear beneath the "Take Snapshot" button in the popout. Click the snapshot you want to share.

  5. The snapshot should open a new browser tab. Highlight the url in the snapshot's browser tab (it should look like this: https://w.trhou.se/duckyj79b1i0 ).

  6. Create your forum post and paste the snapshot's url into the post. Other Treehouse users will be able to open the snapshot, then 'fork' a new copy to check out.

Keep in mind that you can only ever have five snapshots, but you can delete them by hovering over the snapshot located below the "Take Snapshot" button in the popout and click the trash bin icon.

Good luck!

**Edit: Initially put this up as an answer and not a comment.

Justin Gingrich
Justin Gingrich
5,586 Points
/*************************
HEADING
*************************/

#logo {
  text-align:center;
  margin: 0;
}

h1 {
  font-family: 'Source Sans Pro', sans-serif;
  margin-bottom: 15px 0;
  font-size-adjust: 1.75em;
  font-weight: normal;
  line-height: 1.08em;
}

h2 {
  font-size: .75em;
  margin: -15px 0 0;
  font-weight: normal;
}

Thanks for all the answers! This is the area I was talking about and this is what made the spacing look correct. It looks good now its just not the same numbers the teacher in the video was using. I'm guessing the different fonts will change what margins etc should be used?

1 Answer

Looking at your code, the margin-bottom property in h1 should not have 2 values. Either u change it to margin: 15px 0 or remove one of the values for margin-bottom. Also, I think you need to change font-size-adjust to font-size in the same h1 rule. Try changing them and see if it works this time =) In other words:

h1 {
  font-family: 'Source Sans Pro', sans-serif;
  margin: 15px 0;        /*change this to margin*/
  font-size: 1.75em;    /*change this to font-size*/
  font-weight: normal;
  line-height: 1.08em;
}