Image not centering

Question

Hi guys, Having s problem centering an image. All my other images are centered, just not the .profile-image.

Here's my code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Responsive Layout Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" type="text/css" src="css/normalize.css">
  </head>
<body>
    <div class="main-nav">
      <ul class="nav">
        <li class="name">Cheryl Casteling</li>
        <li><a href="home.html">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
    <header>
        <img src="images/responsive-layout-profile.png" alt="Drawing of Cheryl Casteling" class="profile-image">
        <p class="intro">Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end web development at Treehouse and am excited to put all my skills to use!</p>
    </header>
    <div class="main-content">
        <h3 class="alt-title">Portfolio</h3>
        <img src="images/portfolio-1.png">
        <h3 class="titles">Marketing Page</h3>
        <p class="marketing content">The project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
        <img src="images/portfolio-2.png">
        <h3 class="titles">Search Page</h3>
        <p class="search content">The project searches through a specific database to find information that the user is trying to look up.</p>
        <img src="images/portfolio-3.png">
        <h3 class="titles">Travel App</h3>
        <p class="travel content">This project compares travel times based on different transportation methods and tells you the best one.</p>
        <img src="images/portfolio-6.png">
        <h3 class="titles">Map of Favorite Spots</h3>
        <p class="map content">This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
        <img src="images/portfolio-5.png">
        <h3 class="titles">Photo Gallery</h3>
        <p class="photo content">This project shows pictures from a recent trip to the viewer and allows them to easily navigate through the photos.</p>
        <img src="images/portfolio-4.png">
        <h3 class="titles">Calculator</h3>
        <p class="calculator content">Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
    </div>
    <div class="contact">
        <h3 class="alt-title">Contact</h3>
        <p class="contact-info">If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
    </div>
    <div class="footer">
        <ul class="footer-nav">
            <li class="footer-name">Cheryl Casteling</li>
            <li class="top">Back to Top</li>
        </ul>
    </div>
</body>

And here is the CSS:

   /* Global styles */

* {
    box-sizing: border-box;
}

   /* Navigation */

.nav {
    list-style: none;
}

a {
    text-decoration: none;
}

.main-nav,
.main-content, 
.contact,
.profile-image,
.intro {
    text-align: center;
}

.profile-image {
    padding: 0;
}
img {
    max-width: 100%;
}

.footer-nav {
    list-style: none;
}

a {
    display: block;
    margin: 10 5;
    padding: 5 10;
}

Answer 1 · 2016-02-21T02:57:52Z

February 21, 2016 2:57am

Hi Cheryl,

If you apply text-align: center; to your header element then you should be able to get your profile image centered.

Also, make sure that you link normalize.css before your custom styles and use the href attribute instead of the src attribute.

Welcome to the Treehouse Community

Looking to learn something new?

Cheryl Oliver

Cheryl Oliver

Image not centering

1 Answer

Jason Anello

Jason Anello