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 Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by Tawanda Musabaika
Tawanda Musabaika
10,522 Points

Header floats left (images to its right) after adding header {width: 100%}

I followed exactly the video code but my header seems to get all huddled up in the top left corner (tested in firefox, explorer & chrome). Everything seems to work like the video only when I remove the width: 100% in the header selector. What could I have missed?

1 Answer

Mark Truitt
Mark Truitt
17,230 Points

Hi,

Are you doing this in workspaces? If so could you fork it so we could take a look at your code?

Tawanda Musabaika
Tawanda Musabaika
10,522 Points

Hi, Mark yes I'm using workspaces. Here is the fork: https://teamtreehouse.com/workspaces/20593132. Thanx in advance.

Mark Truitt
Mark Truitt
17,230 Points

Hi Tawanda,

I meant snapshot vs fork. I am unable to take a look at the link you attached. My apologies.

Tawanda Musabaika
Tawanda Musabaika
10,522 Points

Ok sorry I'm new to treehouse haven't quite understood snapshots and forks yet. hope this link works. https://w.trhou.se/60hl37rv8o Got it after clicking the snapshot button.

Mark Truitt
Mark Truitt
17,230 Points

No worries. That was my fault. You have to snapshot so it can be forked. I jumped the gun and skipped a step.

Mark Truitt
Mark Truitt
17,230 Points

Hi Tawanda,

Taking a look at the code you are missing width: 100%; You have max-width: 100%;

Having max-width: 100% is generally a good practice as it will help keep things inside of their containers. Example: Header image is 2000px wide but viewport/screen is 1903px wide.

You can also download the files below the video to compare yours to it.

Tawanda Musabaika
Tawanda Musabaika
10,522 Points

Wow thanx Mark! I don't know how I missed that. Spent yesterday night and the whole of today looking at that header selector but missed the max-width. Its now working perfectly like the video!

Mark Truitt
Mark Truitt
17,230 Points

No worries at all and that is part of the fun with coding. If you dive into programming depending on the language it could be something as simple as a , or ; missing from multiple lines of code.

Also please mark as answered, this helps others know this question/issue was already resolved and if they had a similar issue they know they can look here to see the fix/answer.

Tawanda Musabaika
Tawanda Musabaika
10,522 Points

Ok thanx will do.