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 Adding Pages to a Website Style New Pages

Posted by Helen Cross
Helen Cross
750 Points

The margin around image displays incorrectly if the top is set to 0

If the margin is set to 0, auto, 30px the photo touches the navigation. If I change my code to the below, it looks more like the layout in the video:

.profile-photo {

display: block;
max-width: 150px;
margin: 30px auto 30px;
border-radius: 100%;

}

Anybody have any idea what I'm doing wrong?!

Jose Robles
Jose Robles
1,229 Points
Jose Robles
Jose Robles
1,229 Points

Hello Helen, Which browser are you using? The reason I'm asking is because under "Teacher's notes" it says there's a bug in Firefox and he gives you instructions on the proper code to use to fix this issue. Hope this helps.

2 Answers

Helen Cross
Helen Cross
750 Points
Helen Cross
Helen Cross
750 Points

Sorry - I should have put what browser I was using in my question! I'm using Chrome, and have tried out that fix on the off chance that the bug was appearing in chrome too...

Paula Mourad
Paula Mourad
5,154 Points
Paula Mourad
Paula Mourad
5,154 Points

Hi! I'm having the same problem as Helen, and I added a padding of 5% and it worked. I'm also using Chrome. This is my final code:

.profile-photo { clear: both; display: block; max-width: 150px; margin: 0 auto 30px; padding: 5%; border-radius:100%; }

Cheers!