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 thelearner
thelearner
7,640 Points

Removing h3 tag add extra space above the header

Hi,

When I view the page i mobile view it looks fine like this: prntscr.com/fa9y14

But if I remove header h3 i.e. Hello, then it adds extra space at the top of the header: https://prnt.sc/fa9y82

So the header and the body are not top aligned. I tried margins etc but nothing works. I wonder why h3 which is in the middle of the page has anything to do with the header and this spacing issue!

Any ideas please?

2 Answers

aiden1408
aiden1408
3,338 Points
aiden1408
aiden1408
3,338 Points

How about this?

body {
  margin: 0;
}
thelearner
thelearner
7,640 Points

No. The margins didn't help. Not with the body margin.

Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points
Xayaseth Boudsady
Xayaseth Boudsady
21,951 Points

I duplicated the exact problem. You need to add the "clear: both;" in the wrapper properties.

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  clear: both; // Add this property
}

https://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do