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
Scott Cinatl
3,718 PointsFloat 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!
1 Answer
Rajashree Madan
13,293 PointsInside #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
3,718 PointsScott Cinatl
3,718 PointsYes! 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
13,293 PointsRajashree Madan
13,293 PointsYes, working with multiple style sheets can be tricky. Glad you were able to fix it.