Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Style New Pages

Multiple image problems!

My profile picture is stuck at the top not in the center without a space between it and the nav header, and I also can't get it to be rounded. I have rewatched the last 2 videos and I tried what other people have done to fix this problem. I am sure I'm missing something I am just at a loss.

I don't think my problem is in this file, but here it is.


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

Here is also my about.html file that is copied the code from the indext.html to the about.html. Which I then moved the class selection from portfolio to about and then deleted the code between <section> and </section> .

<!DOCTYPE html>
   <meta charset="utf-8">
    <title>Charlotte James |Designer Violinist </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Cuprum:400,400i,700,700i|Josefin+Sans:400,400i,700,700i" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
      <a href="index.html" id="logo">
        <h1>Charlotte James</h1>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
    <div id="wrapper">
        <img src="img/charlotte.jpg" alt="Photograph of Charlotte James" class=".profile photo">
        <p> Hi, I'm Charlotte James! When I'm not coding, I enjoy spending time with family, playing the violin, hiking in the mountains, and more. </p>
        <p> I don't have a Twitter account just yet, but if you would like to follow me on Instagram my user name is <a href="http://instagram.com/charlotte__james__">charlotte__james__</a>.</p> 
        <a href="http://instagram.com/charlotte__james__"> <img src="img/instagram.png" alt="Instagram logo"class="social-icon"></a>
        <a href="http://www.facebook.com/charlotte.james.9028"><img src="img/facebook.wrap.png" alt="Faebook logo" class="social-icon"></a>
        <p>&copy; 2017 Charlotte James</p>

2 Answers

Yaasir Hassan
Yaasir Hassan
10,176 Points

Hey Charlotte, Your picture class you gave the html says (class=".profile photo) and in your css you wrote ( .profile-photo). To fix this remove the dot that is before the profile in the html and add a hyphen in your between profile and photo like this ------(class="profile-photo"). To make your picture rounded the border radius has to be 50%. ------ border-radius: 50%;

Okay, I changed ".profile-photo" to "profile-photo" in both the about.html file and in the main.css file. I saved the changes and refreshed the preview page but it is still on the left of the page with no top margin.

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

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

Yaasir Hassan
Yaasir Hassan
10,176 Points

try this

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

profile-photo { clear: both; display: block; max-width: 150px; margin: 20px auto 30px; border-radius: 50%; }