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
Ron Gootman
24,409 PointsI 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
19,579 PointsHi Shir,
Try adding clear: both; to the bottom of your profile-photo in your css.
And you need to put the 30px back too.
Scott Giovanni
10,498 PointsCan you provide the code you are using?
Ron Gootman
24,409 Points'''<!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>'''
Ron Gootman
24,409 Points/********* 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; }
Ron Gootman
24,409 PointsThe 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
10,498 PointsRemove the '30px' you have in your margin. It should be:
.profile-photo {
margin: 0 auto;
max-width: 150px;
display: block;
border-radius: 100%;
}
Ron Gootman
24,409 Pointsstill remains on the right side along side the header section :-\
Ron Gootman
24,409 PointsRon Gootman
24,409 PointsThanks Wayne! it worked.
Wondering why my code did not work as I was following the instructor...
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHi Shir,
It could be as simple as the browser your using.
Are you using Firefox?
Ron Gootman
24,409 PointsRon Gootman
24,409 PointsYes, 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
19,579 PointsWayne Priestley
19,579 PointsHi 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.