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

Picture disappears

After putting this

      <img src="img/nick.jpg" alt="Photograph of Nick" class="profile-photo">
      <h3>About</h3>
      <p>Hi! This is my design portfolio where I share my favorite work.</p>

on the about.html

and this /************************************ About *************************************/ .profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; } in the main.css

the picture disappears.

I can comment out the display declaration

/display: block;/

and the picture reappears but is not centered. width and radius apply but not auto margin.

I'm using Firefox browser.

Any suggestions?

3 Answers

Hi Kent,

The Teacher's notes for this video contains a fix for firefox. The problem is due to the floated header.

However, I recommend instead that you clear the floated header in your wrapper div since this is what immediately follows the header.

Add clear: both to your existing #wrapper rule.

#wrapper {
    clear: both;
}

-

Thanks!