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
Angela Kirbyson
Courses Plus Student 538 Pointsspacing and border-radius issues
Following along with the videos, I have set my .profile-photo exactly as Nick has, using his photo as well. The problem is, I have no space between the green nav block and the top of the image like he does. If I try to add more margin to the top of the image, it seems to squish the circular frame of the image. Did I miss a step?
7 Answers
Dustin Matlock
33,856 PointsIt has to do with your shorthand code. You are missing some values. Your previous code was missing a colon. Thank you Jason Anello.
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
Jason Anello
Courses Plus Student 94,610 PointsHi Angela,
The header has 30px of bottom margin which is what creates the space between the header and the top of the image.
Check your header rule to see if anything is wrong.
header {
float: left;
margin: 0 0 30px;
padding: 5px 0 0;
width: 100%;
}
Dustin Matlock
33,856 PointsYou can post your code if you like but you should have something like this.
.profile-photo {
margin: 0 0 30px 0;
}
Jason Founts
Courses Plus Student 14,384 Points+1 Dustin, post your code for better help.
Not sure if this helps, but did you notice the firefox bug correction that is mentioned on the page? If using firefox, it says use this: .profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Angela Kirbyson
Courses Plus Student 538 PointsOk, tried all of these, including adding the bug fix code even though I'm using Chrome - thought I'd give it a shot anyways - and Nick is still hitting his head on the nav bar (poor guy!). My header code is:
header { float: left; margin 0 0 30px; padding:5px 0 0; width: 100%; }
And .profile-photo code:
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
Ps - thanks for the quick responses, much appreciated :)
Jason Anello
Courses Plus Student 94,610 PointsHi Angela,
The css code that you have posted here for your header is fine and matches the code I posted from the project except that you do not have a colon after margin.
This property was being ignored by the browser which is why you were not getting that 30px of bottom margin.
Dustin Matlock
33,856 PointsYes, and that was actually why your code did not pass.
Angela Kirbyson
Courses Plus Student 538 PointsTheeeeere it is. Thanks Dustin!
Angela Kirbyson
Courses Plus Student 538 PointsTheeeeere it is. Thanks Dustin!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Dustin,
It's not necessary to have all 4 values if your left and right value is the same. Using 3 values, the middle value counts as both the left and right value. The first value is for top and the 3rd value is for bottom.
Dustin Matlock
33,856 PointsDustin Matlock
33,856 PointsTrue but for the sake of comprehension and ease, it may have been presented this way intentionally. However, it is a good point and you can read about that here.