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

profile-photo

When I added the photo, it was placed next to the header and not below in the center. I'm not sure what I did wrong.

/*****************************************************************
GENERAL
******************************************************************/

body {
    font-family: 'Open Sans', sans-serif;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}



/*****************************************************************
HEADING
******************************************************************/

header {
    float: left;
    margin: 0 0 30px 0;
    padding: 5px 0 0 0;
    width: 100%;
}

#logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Alegreya', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}



/*****************************************************************
NAVIGATION
******************************************************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}



/*****************************************************************
FOOTER
******************************************************************/

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
}



/*****************************************************************
PAGE: PORTFOLIO
******************************************************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3cy;
}



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

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




/*****************************************************************
COLORS
******************************************************************/

/*site body*/
body {
    background-color: #fff;
    color: #999;
}

/* green header */
header {
    background: #6ab47b;
    border-color: #599a68;
}

/* nav background on mobile */
nav {
    background: #599a68;
}

/* logo text */
h1, h2 {
    color: #fff
}

/* links */
a {
    color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
    color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
    color: #32673f;
}

//edited for markup//

Can you post your HTML as well

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="google-site-verification" content="5RT8U_9yCSK-i7k74tTahZxqf0TLkSd_D63aU8x0bK4" /> <title>Bryan Brautigam | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Alegreya:900,700|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Bryan Brautigam</h1> <h2>Designer</h2> </a> <nav> <ul> <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> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hello, my name is Bryan Brautigam and I am an amatuer web designer.</p> </section> <footer> <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2016 Bryan Brautigam.</p> </footer> </div> </body> </html>

2 Answers

try adding clear:both to your profile-photo css

well that worked perfectly. THANK YOU!

it was because your header was floated to the left. that means your header was taken out of the flow of the document and no longer occupied the full width of the page. thats why your profile photo was next to your header as it was filling up unoccupied space :)

Kevin - Shouldn't the width: 100% declaration keep the header filling the whole width of the window?