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
Chris Rouse
3,321 PointsNo Space Between Navigation Bar and Profile Picture on About Page
Hello, I am working through "Adding Pages to a Website", http://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-a-new-page, and I am having trouble getting a space between the profile picture and the navigation bar as shown in the video. On my page the profile photo is butted up against the navigation bar. I went through the html and main.css files and cannot find anything wrong. I tried starting over and double checking my work against Nick's but all the syntax looks the same. I would appreciate your help as I really want to learn how to correct this problem. Thank you in advance.
3 Answers
Dane Parchment
Treehouse Moderator 11,075 PointsTry adding a margin on the section tag that the profile picture is contained in.
Chris Rouse
3,321 PointsThanks Dane for the suggestion. I tried adding an id (id="profile-image") inside the section tag and then selecting it in main.css so I wouldn't affect the index.html documents section tag. I then wrote,
'''css
profile-image {
margin-top: 30px; }
It still looks the same. I also tried,
'''css
profile-image {
margin: 30px
} """
And it created a margin at the top of the header, which I don't understand. I don't get what the section tag has to do with the heading tag?
I also just tried increasing the margin size in the code Nick provided but it doesn't do anything.
The origninal '''css
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }"""
I tried this,
''''css
.profile-photo { display: block; max-width: 150px; margin: 30px auto 30px; border-radius: 100%; }"""
and this
"""css .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
profile-image {
margin-top: 30px; } ''''
However, I mainly want to know where I went wrong in the instructions. As far as I can tell I have everything as it is in the video but obviously I messed something up along the way. I just can't figure out where.
Chris Rouse
3,321 PointsWhen I remove "display: block" I am able to adjust the top margin. When I add it back in it goes right back where it was.