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 Adding Pages to a Website Style New Pages

I followed Nick's HTML and CSS code and for some reason the profile-photo goes all the way to the upper-right side

did anyone get the same thing?

3 Answers

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Shir,

Try adding clear: both; to the bottom of your profile-photo in your css.
And you need to put the 30px back too.

Thanks Wayne! it worked.

Wondering why my code did not work as I was following the instructor...

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Shir,

It could be as simple as the browser your using.
Are you using Firefox?

Yes, I am using Firefox while Nick is using Chrome - that is probably why...

I should probably follow the tutorials and do the code on Chrome as well.

Thanks again Wayne!

Wayne Priestley
Wayne Priestley
19,579 Points

Hi Shir,

Your issue is actually only a problem that happens with the Firefox browser.
If you have a similar problem in the future it might be a good idea to check your work in another browser just to make sure.

Glad it's all sorted now.

Scott Giovanni
Scott Giovanni
10,498 Points

Can you provide the code you are using?

'''<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ron Gootman | Future Entrepreneur</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head>
<body> <header> <a href="index.html" id="logo" > <h1>Ron Gootman</h1> <h2>Upcoming Entrepreneur</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="photo of nick" class="profile-photo" /> <h3>About</h3> <p> Hi, I'm Ron Gootman this is my site where I learn HTML/CSS with teamtreehouse</p> <p>If you'd like to follow me at Twitter, my user name is <a href="http://twitter.com/RonGootman">@RonGootman</a>.</p> </section> <footer> <a href="http://twitter.com/rongootman"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/ron.gootman"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Ron Gootman.</p> </footer> </div>
</body> </html>'''

/********* Gallery **********/

gallery {

margin: 0; list-style: none; padding: 0;
}

gallery li {

float: left; margin: 2.5%; width: 45%; background-color: #f5f5f5; color: #bdc3c7;

}

gallery li a:hover {

color:#32673f }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/********* Page: About **********/

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

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

img { max-width: 100%; }

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

/***** a href setting *****/ a { text-decoration: none; }

a { color: #6ab47b; }

wrapper {

border: 1px blue dashed; max-width: 940px; margin: 0 auto; padding: 0 5%; }

logo {

text-align:center; margin: 0; }

header { background: #6ab47b; border-color: #599a68; float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

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

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

h1, h2 { color: #fff;
}

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

nav ul li{ display: inline-block; }

nav a{ font-weight: 800; padding: 15px 10px; }

nav { background: #599a68; text-align:center; padding: 20px 0; margin: 20px 0 0; }

nav a, nav a:visited { color: #fff }

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

body { background-color: #fff; color: #999; }

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

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

The photo does get's centered as intentioned only when I add the following CSS code, otherwise it goes back to the upper right:

section { border: 1px dashed black; }

Scott Giovanni
Scott Giovanni
10,498 Points

Remove the '30px' you have in your margin. It should be:

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

still remains on the right side along side the header section :-\