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
Vaughn Ava
590 Pointsin "build navigation with unordered lists" spacing under header (at 2:50) does not update like nick's?
I've been going back through lessons trying to correct a spacing issue I've been having and have finally identified when (but not why) I went wrong. in "build navigation with unordered lists", once we finish up float: left, the space between nick's header and gallery grows just a little and the margin between header and content is bigger on every page from there on out. I entered the code exactly like nick did, I think, but all the page content is still smushed up against the header!
5 Answers
Justin Iezzi
18,199 PointsHey Vaughn,
If you take a snapshot of your workspace we can check out what's wrong. At the top right of your workspace, click the little camera icon and then click "Take Snapshot". It'll give you a link that you can paste here.
Justin Iezzi
18,199 PointsThanks for the snapshot!
I believe I found the issue here.
header {
float:left;
margin: 0 0 30x 0;
padding: 5px 0 0 0;
width: 100%;
}
Your header rule has a typo, specifically on the margin rule. If you change "30x" to "30px" you should see the same spacing that Nick's site has in the video.
Let me know if this fixes it for you!
Vaughn Ava
590 Pointshuh. that seemed like it would super fix it; I hadn't even realized the missing p! correcting it didn't change anything, though :<
Justin Iezzi
18,199 Pointshttp://port-80-nrr1izg4df.treehouse-app.com/index.html
Check out this fork, let me know if this seems visually correct to you. If not, let me know what you're looking at.
Changing the header rule to -
header {
float:left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
should add a 30 pixel margin to the bottom of the header, giving space between the header and the gallery.
Vaughn Ava
590 Pointsdefinitely seems correct and lines up completely with what I have saved. this is what I'm seeing though: http://port-80-dyutfmveva.treehouse-app.com
Justin Iezzi
18,199 PointsMy link and your link look exactly the same on my end, and both have the 30px bottom margin working fine. Is there something else I should be looking at?
Vaughn Ava
590 Pointsokay, I just realized I've been viewing it in safari and nick is using google chrome. so I viewed it in chrome and the spacing looks spot on. but I feel like it's not supposed to differ browser to browser? or maybe that doesn't matter/is expected.
Justin Iezzi
18,199 PointsMy fault, I should have suggested viewing it in a different browser. There will sometimes be differences between browsers and how they interpret your html/css. I'm not sure why Safari specifically is having an issue viewing the margin, but I'm sure it's something in there.
I'd recommend using Google Chrome while using Treehouse, generally Chrome is the farthest in support and you won't run into these issues too often.
Down the road, you'll want to be concerned with how your sites look on different browsers. As you delve deeper into learning here, you'll start to figure out how to fix these sort of things. Normalize.css will fix some of it, but not all of it.
Glad you figured it out!
Vaughn Ava
590 Pointsword up, thank you for all your help!
Vaughn Ava
590 PointsVaughn Ava
590 Pointsah, thank you! here's the li'l guy: https://w.trhou.se/87ysozkum9