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 Responsive Web Design and Testing Adjust the Profile Page and Header

Posted by Kamal Nassouh
Kamal Nassouh
3,547 Points

my header h1 and h2

so I have completed this video and I am having a slight problem with my code with the header, I have added the following: 

#logo {
    float: left;
    margin-left: 5%;
    text-align: left;
    width: 45%;  
  }

h1 {
    font-size: 2.5em;
  }

  h2  {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

 header { 
    border-bottom: 5px solid #599a68;
    margin-bottom: 60px;
  }
}

my H1 and H2 appear high on the top left as opposed to my nave on the left witch is abit above the border.

rydavim
rydavim
18,814 Points
rydavim
rydavim
18,814 Points

Could you post a workspace snapshot using the camera icon in the top right of your workspace? That will allow us to take a look at all your code files and file structure, and help figure out what might be going wrong.

3 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

All I can tell you from what you posted is that you have a stray } at the end of the code snip.

It may be a margin collapse issue, but I cannot tell from this.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Actually, the video discussion I linked to is the same video as the one you are on, so it is almost certainly a margin collapse issue. Follow the link for a discussion and the solution.

edited for clarity

Vicki Corich
Vicki Corich
6,632 Points
Vicki Corich
Vicki Corich
6,632 Points

Are the h1, h2 and logo in the header? If so, style the elements in the header. For example; header h1 { font-size: 2.5em; } The way you have it written all the h1 elements will be the size specified throughout the site. Unless that's your intention. Also, you have floated the logo to the left. So, the h1 and h2 elements are going to float to the right of the logo if they come after the logo in the html. Post of all of the html and css. It's hard to tell from the small bit of css. Hope that helps.

Bronwyn Sheldon
Bronwyn Sheldon
3,564 Points
Bronwyn Sheldon
Bronwyn Sheldon
3,564 Points

It is actually difficult to provide any form of answer given the small code snippet you have provided. I would suggest perhaps in the header selector you could try a display:inline-block. Perhaps place the h1 and h2 in a div and then float the div left next to the logo