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
Bryan Brautigam
739 Pointsprofile-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;
}
Kevin Faust
15,353 PointsCan you post your HTML as well
Bryan Brautigam
739 Points<!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
Kevin Faust
15,353 Pointstry adding clear:both to your profile-photo css
Bryan Brautigam
739 Pointswell that worked perfectly. THANK YOU!
Kevin Faust
15,353 Pointsit 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 :)
Robert Ellefson
5,672 PointsKevin - Shouldn't the width: 100% declaration keep the header filling the whole width of the window?
Kevin Faust
15,353 PointsKevin Faust
15,353 Points//edited for markup//