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

Posted by H C
H C
883 Points

can't center the wrapper

I must have done something wrong with coding, but i can't spot them.

Also the img for facebook and twitter icons in footer won't appear on the web. please help!

Nanna Larsen
Nanna Larsen
2,695 Points

The link you posted is broken. I get a 404 when I click it. Do you still need help?

H C
H C
883 Points

Thank you. is it ok?

Nanna Larsen
Nanna Larsen
2,695 Points

I still get an error when I click the link. I don't know why. If you open up the workspace there should be a button in the top right corner, it looks like a little camera, this will allow you to take a snapshot of your workspace, so that you can post it and other people can see the code. You could try that if you want.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Yes, that link is to the workspace, not the fork snapshot. You have to post the snapshot for us to be able to look at it.

H C
H C
883 Points

Thank you. I hope it will work.

Brett Comardelle
Brett Comardelle
8,541 Points

Text-align: center in the div element that contains the icons should work.

H C
H C
883 Points

Thank you very much!

Does that mean there is something wrong with div ＃wrapper to work on my page? Somehow section will not be centered with this code?

Brett Comardelle
Brett Comardelle
8,541 Points

I'm not entirely sure why that happens, I assume it is a browser or resolution issue (non-responsive design). Text-align:center is just a sort of cheat way to solve it. It isn't text, but it works well.

H C
H C
883 Points

Thank you so much! I wish I can solve this browser issue.

2 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

First, the easy issue. The facebook and twitter images were not coded quite correctly. You wrote scr. It needed to be src.

Second, the centering issue is more interesting. I used Chrome developer tools to see that your style was not being applied to the div #wrapper. I made sure that the main.css was being used by changing the color of h1 and adding a background color to the div. It accepted the h1, but not the div style. I rewrite the tag in the CSS and it started working. I have no idea why. Here is my current fork snapshot: https://w.trhou.se/y1mar5ehs7

As a side note your twitter link points to facebook.

H C
H C
883 Points

Thank you so much! How do I make a browser respond to div #wrapper and the styles? Is this workable? Because there might be other div, can i always solve the problem by using text-align? I am afraid that I can't follow the lesson since this element doesn't work.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Text-align will not always solve your problem and will lead to confusing issues. Try retyping your #wrapper in your css. If that does not work, try following the link to my fork snapshot, then clicking on the button on the upper right. That will turn the snapshot into a Workspace you can alter and preview.

They also often update to a new workspace after one segment of the course and supply the correct, functional code created up to that point.

H C
H C
883 Points

Thank you for the help!

I think i know why div is not respond to the page: I used a different input for ＃ and it is not applied. But if i paste the # from your post. Everything works out!

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

That makes sense.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

You have to think about what you are actually doing when you apply CSS. The margin: auto; on the div is centering the div in its parent element. It is not acting on any child elements. Therefore, you see the div centered on the page, but the pictures and other elements in the div are aligned to the left in the div. This is an important concept because you often want the site to be smaller than the browser on a computer but also centered. And you want the overall layout of the site to be maintained. So you center the div (I usually center the body) for that reason.

The text-align aligns inline elements within their parent. Thus, you see alignment happening within the div when you use text-align. I would not recommend using text-align in this context because you may have formatting that is hard to figure out down the road. Apply formatting to the child elements directly when you want those formatted.

It is often helpful to put a border or background color on an element to see exactly where it is and what you are doing to it.