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

Scott Cinatl
Scott Cinatl
3,718 Points

Float Left property is making logo block huge

When I enable "float: left;" for #logo, the header text's background turns into a huge green block. It seems the margins are all out of whack, but I double checked them and there is no glaring issue. The header looks normal (despite being to close to the left margin) when the "float:left" property is not included in my CSS. Just stumped on what can be causing the problem. Left a link to my workspace below. Would appreciate any advice. Thanks!

https://w.trhou.se/5t2ly1ymkw

1 Answer

Rajashree Madan
Rajashree Madan
13,293 Points

Inside #logo, the margin is set to 100%, that must be causing the issue.

On a side note, you have assigned float: left to the header which is not needed. Usually, headers occupy the entire width of the browser. As it is in this case, with its width set to 100%. So the float won't do anything to change the layout.

Hope this helps :)

Scott Cinatl
Scott Cinatl
3,718 Points

Yes! That worked. I think I was just focusing on my coding in responsive.css rather than checking what could be wrong in main.css. After removing the margin for both the header and logo, the layout matched how Nick had his for the course.

Thank you so much!

Rajashree Madan
Rajashree Madan
13,293 Points

Yes, working with multiple style sheets can be tricky. Glad you were able to fix it.