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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

William Schwarz
PLUS
William Schwarz
Courses Plus Student 541 Points

Didn't realize until now that the "about" photo was supposed to be in the middle of the page.

It's on the left, and I can't figure out how to have it in the middle at the beginning of this step so that it's doing what it's supposed to by doing (floating) when I'm done.

Once HTML identifies your profile image with the 'id="profile-photo"' (in this example). Then in CSS, along with the other attributes defining "profile-photo", such as:

.profile-photo { display: block; etc. }

[the following 'margin' attributes added to the above ^^ properties and values will centre the logo:]

.profile-photo { margin: 0 auto 30px;
}

(where 'auto'=relative to the left and right borders (or centred). }

Hope this works, or helps you figure out where your code needs adjusting.

Post your code

1 Answer

/******************************
PAGE: ABOUT
******************************/

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

The value 'auto' in the above code serves to centre your image relative to the left and right margins.