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

What happened to my img?

In my main.css file when I use the "display: block;" technique to center my img, it causes the img to appear at the right side of the header when viewed in my browser. (Firefox) When I change "block" to "center" the img lines up in the section portion of my page but inline with the text. Why is using "block" not centering my img in the section portion of my "about.html" page?

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

Is this only happening in Firefox? And which version of Firefox?

Is this how you want it to look?

http://codepen.io/anon/pen/uFldb

I don't know why the markdown doesn't appear to be working. I added the backticks?

Did you remember to type css after the first couple of backticks?

Like this, only with backticks:

ยดยดยดcss

code

ยดยดยด

EDIT: And it also needs to be on separate lines!

I did format my code with the backticks and the css but it does not look right when I select my question from the forum.

Aaah.. Okay, might just be a bug with markdown

3 Answers

Thank you for your responses! I was so wrapped up in my workspace that I failed to read the instructors notes lower down on the lesson video page. He tells us there is a bug in Firefox that causes the img to appear incorrectly and he gives the code to correct it! I implemented his fix and it is now working. Thank you again!

No problem man, good luck :)

Hi, I have Firefox 28.0 I have only used Firefox to access Treehouse so I can't say if it does this in a different browser. I looked at your codepen example, I think that is about what the instructor has in mind. The img centered under the header and centered over the text below. Mine does not center. It adds a slider bar to the page and puts it far right of the header, but not on the header.

Could you try to make it in a workspace and see if the error still occurs?

EDIT: That doesn't make sense.. Could you try to view it in another browser? For example IE or Safari.

The only logical explanation I could see to this is that Firefox adds some sort of user agent stylesheet that messes with some settings, you could try to use a resetter like normalize.css.

The other explanation is that you forgot something simple, like the <!DOCTYPE html> or something like that, really easy to miss!