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
Hayden Bryce
3,103 PointsMy header on "About" page is different to the rest. My profile photo also seems to not wrap effectively.
After following the current video, tracking my steps and code I can't seem to figure out why I have an extra white border/negative space on my About header. My profile pic doesn't seem to be contained in two columns or be wrapping very well?
6 Answers
Nick Yoho
6,957 PointsHi Hayden, I'm working with your original workspace you posted (https://w.trhou.se/xpvn186ru8) , without any alterations Ivan suggested. In your main.css file the styling for your h3 tag should be margin and not max-width. That should fix your header issue
h3 {
margin: 0 0 1em 0;
}
Nick Yoho
6,957 PointsAlso want to point out that your link to the responsive.css file on your html pages is forgetting a closing > and the link to your cofffedoughnut image is also broken.
Ivan Kozhunkov
Courses Plus Student 8,480 PointsSure, write # instead of .
In CSS
It's must to be so #main-container { overflow:hidden; margin: 0 auto;}
But in your code it looks like .main-container { overflow:hidden; margin: 0 auto;}
In About.html file
In about.html you choose an id incorrectly!
Your code <div id=main-container>
But correct syntax is <div id="main-container">
Hayden Bryce
3,103 PointsThank you! That made it very clear. Apologies for not quite getting it, I am very new. Now just need to figure out the profile image. Any ideas? https://w.trhou.se/hnevtq4aev
Ivan Kozhunkov
Courses Plus Student 8,480 PointsMaybe, the reason for this behavior in your header concludes in float property. When we use floats, we must apply "overflow: hidden" property to the parent or add a clearfix rule also to the parent of an element.
clearfix rule syntax:
parent element : after { content : ""; display: table; clear : both;}
The easiest variant - add an "overflow : hidden" for body.
Problem with .profile-photo. Your content is not situated in the section space. Look where you final </section> tag is situate.
Hayden Bryce
3,103 PointsThank you for your time and advice, Ivan. After trying to understand and implement what you said I'm still having trouble/seeing no changes to either issue. Could you maybe show what code to put or adjust and where? I might understand it a bit better, Thanks in advance.
Ivan Kozhunkov
Courses Plus Student 8,480 PointsI decided yor problem with About space at the top!
Wrapped all content of the body in about.html file with div and add him an id ="main-container"
<body>
<div id="main-container">
//all content of body
</div>
</body>
and add this in CSS to /About Page/ part of you code
/**************************** PAGE:ABOUT ****************************/
main-container {
overflow: hidden;
margin: 0 auto; }
Necessary add "#" before the id name in css, for some reasons it's invisible in this post.
You can see it on the link from my TreeHouse page https://teamtreehouse.com/workspaces/25685622#
Hayden Bryce
3,103 PointsI think I have done and understood what you have told me to do but for me, its still not having any desired effect.
Update = https://w.trhou.se/dov2zlb26w
Your link also isn't available
Apologies if I'm misunderstanding, but if I can fix this with your help ill be very grateful.
Ivan Kozhunkov
Courses Plus Student 8,480 PointsI had a look your code, you must to delete "." in your css file for main-container, in the part /* About */.
You write "." ( class selector) and "#" (id selector).
Just delete class selector.
And id selector also like a class selector must to be writing without " ".
Also delete "".
I wrote "" in comments toward just for separate grille selector from another text.
main-container {
overflow:hidden;
margin: 0 auto;
}
Why # before main-container isn't displayed in the code beyond? I write it, but it's invisible..)))
Write grille # without "" and any space for main-conteiner choose in css
It must to be so #main-container { overflow:hidden; margin: 0 auto;}
Hayden Bryce
3,103 PointsHi Ivan, I see what you meant and have made the correct adjustments from what I can see? Still no change or any effects, I must be missing something or again writing incorrect code.
UPDATE- https://w.trhou.se/ipgp1mo82e
Ivan Kozhunkov
Courses Plus Student 8,480 PointsI open your code from your last link and i can't see any changes.
What i see again in about.html
<div id=main-container>
But it must to be looking so <div id="main-container">
Id name must to be conclude in "" !
And in CSS in Page About part
/**************************** PAGE:ABOUT ****************************/
Your code : .main-container { overflow: hidden; margin: 0 auto;}
Must to be so: #main-container { overflow: hidden; margin: 0 auto;}
I didn't saw any changes.
Maybe you didn't save you changes in files?
Hayden Bryce
3,103 PointsHayden Bryce
3,103 Pointshttps://w.trhou.se/xpvn186ru8