Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics CSS Layout Project Creating and Styling the Layout Containers

Matthew Ashman
Matthew Ashman
4,364 Points
Posted by Matthew Ashman
Matthew Ashman
4,364 Points

What in the world did I do!?

I was fiddling around with the HMTL/CSS trying to do the challenge by myself like a good little boy, and then BOOM -- my image takes up the whole screen; footer is whacked; and overall, the thing is just a mess.

I try following along with the next video (and downloaded to zip, to see code for code what was different) , tried making the adjustments, and still -- the IMG dominates my page.

Just wondering if anybody could shine some light on what I did, so I can learn from this wonderful catastrophe! Thank you in advance,

2 Answers

Jeff Spelis
Jeff Spelis
21,304 Points
Jeff Spelis
Jeff Spelis
21,304 Points

On line 65 you forgot to the end curly brace for your .main-nav a selector, so the

.logo { width: 190px; }

on line 103 was being ignored, and the logo image was set to the full width of the browser because of the img selector on line 35:

img { max-width: 100%; }

In the future the W3C Validator @ https://jigsaw.w3.org/css-validator/ is a helpful resource to catch missing curly braces, typos, etc..

Matthew Ashman
Matthew Ashman
4,364 Points
Matthew Ashman
Matthew Ashman
4,364 Points

Jeff, thank you so much for spotting that.

As a rookie, I definitely need to be utilizing some of these resources; thank's for the help!

Nick Beukema
Nick Beukema
6,359 Points
Nick Beukema
Nick Beukema
6,359 Points

It seems as though your SVG items are defaulting to full width. I would try putting a set width on them, whether a percent or a pixel amount. This will at least get them to a size you'd like, although it doesn't force them to their 'native' size.

Matthew Ashman
Matthew Ashman
4,364 Points
Matthew Ashman
Matthew Ashman
4,364 Points

Would you provide me an example of this? I'm new to the development world and, do not understand what SVG is referencing. Put a width on the IMG? Banner? H1? Thank you,