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

CSS How to Make a Website Adding Pages to a Website Style New Pages

Posted by Christian Erickson
Christian Erickson
13,894 Points

No margin between profile pic and navigation

Can't find an answer for this on the forum but for some reason the margin is not showing up between the profile pic and the navigation no matter what I try. I'm using safari. The code is exactly what Nick does in the video, I'm even using the pic provided, and I can't find any errors in my HTML or CSS that would cause this problem.

Any ideas?

Here's my CSS code btw: 

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

5 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

It looks like you had a semicolon after your margin property instead of a colon. If you replace the semicolon with a colon, it should correct the issue. For future reference, you can post a Pen like this.

header {
  float: left;
  margin; 0 0 30px 0;    /* Replace semicolon with colon */
  padding: 5px 0 0 0;
  width: 100%;
}
Christian Erickson
Christian Erickson
13,894 Points

Dude! Thanks! Not sure how I missed that!

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Hi Christian, could you maybe post the full HTML and CSS onto something like CodePen? Or you can post the full contents here if you like.

Christian Erickson
Christian Erickson
13,894 Points

Here's my HTML: http://codepen.io/anon/pen/ogZapK.html

And my CSS: http://codepen.io/anon/pen/ogZapK.css

Juan Aviles
Juan Aviles
12,795 Points
Juan Aviles
Juan Aviles
12,795 Points

What browser are you using? I had this problem while using Firefox, and found that Firefox had issues with displaying elements as block. If you are indeed using Firefox, try Chrome for this particular challenge.

Chris Brown
Chris Brown
1,923 Points
Chris Brown
Chris Brown
1,923 Points

Dustin, Thanks for your code example. I was having the same issue with no space between the profile picture and navigation bar. When I glanced over my CSS a bit more in depth, I found that after each value for the padding and margin I had placed a comma. For some reason I thought that was necessary but it turns out not to be so much. I was trying to add padding to the wrapper element to correct this initially but it was much easier after just removing the stinking commas.

Thanks Again!!

Tyler _
Tyler _
6,651 Points
Tyler _
Tyler _
6,651 Points

I'm using Firefox. I have the same problem. The image is up against the nav bar with no padding at all. Is there a fix?