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
Marta Palacio
6,740 PointsNo gap between the navigation and profile-photo.
I know other users have asked the same question, but I can't solve it with the answers they've been given. This is my CSS code:
.profile-photo {
clear: both;
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
I've tried to change the margin to "margin: 30px auto 30px;" But that doesn't fix it either, the photo stays sticked to the navigation bar.
Could it be something wrong in the rest of my html or css code? If you have any ideas of what could be wrong, I'd appreciate the help very much. Thank you.
3 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsTry
margin: 30px auto;
Margin rules with 2 values apply the given margin to the top/bottom and left/right of an element.
If you did it with 4 values, the order of value would be top, right, bottom and left. :-)
Marta Palacio
6,740 PointsThen I'll try to check the html code comparing it to the video to see if I can find what's causing this. Thank you. :)
(I've noticed the odd highlighting too and I don't know why it appears like that either)
Mary keim
886 PointsI'm having the exact same problem. :( Any help would be appreciated!
Marta Palacio
6,740 PointsMarta Palacio
6,740 PointsThank you! You're right, my line of code was messy... I've changed it as you say, but there's no gap between the photo and the nav yet.
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsThat's odd.
That should give you 30px of margin at the bottom and the top of the .profile-photo element.
That said, I'm wondering about 2 things.
Is there something about your code in your workspace file or html5 that's causing the style to inherit values from it's parent element.
Also the syntax highlighting on your border-radius: declaration. It looks fine to me though I'm wondering why the border-radius highlighting would like like that, but the code looks good to me.