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!

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

John Beyer
John Beyer
2,154 Points
Posted by John Beyer
John Beyer
2,154 Points

Issue With Display: Block

I'm having some issues getting the profile pic to display correctly in the "Adding New Pages to a Website" section of the "How to Make a Website" course. As far as I can tell, my code matches Nick's. When he refreshes, his profile pic appears under the header and above the copy. But when I refresh, the profile pic appears inline with the header. The HTML is as follows:

<section>
        <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Placeholder for copy.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="https://twitter.com/nhoJreyeB">@nhoJreyeB.</a></p>
      </section>

And the CSS:

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

I'm sure I'm missing something obvious, but still new to this. Thanks in advance for your assistance!

1 Answer

Gloria Dwomoh
Gloria Dwomoh
13,104 Points

Check this past question, it might help - here.

John Beyer
John Beyer
2,154 Points
John Beyer
John Beyer
2,154 Points

Thanks Gloria! That cleared it right up.

Gloria Dwomoh
Gloria Dwomoh
13,104 Points

You are welcome John.