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

spacing 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

It 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%;
}

Hi 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.

True 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.

Hi 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%;
}

You can post your code if you like but you should have something like this.

.profile-photo {
    margin: 0 0 30px 0;
}

+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%; }

Ok, 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 :)

Hi 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.

Yes, and that was actually why your code did not pass.

Theeeeere it is. Thanks Dustin!

Theeeeere it is. Thanks Dustin!