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
Sean Amador
500 PointsFor some reason my profile-photo doesn't have a margin in between the Navigation and the top of the photo.
In the video it says to set the margin for the class .profile-photo to "margin: 0 auto 30px;" however on google chrome the profile picture is sitting just beneath the navigation with no border. So I attempted to add the margin myself by changing the margin for the profile-photo class to "margin 50px auto 30px;" however this has no change on the image no matter the value I put for the margin for the top of the image.
.profile-photo { display: block; max-width: 500px; margin: 0 auto 30px; <-- i attempted to change the top value for this to border-radius: 100%; }
Thank you for any help in advance!
6 Answers
Matthew Alesci
7,465 Pointswould you be able to post your files?
Matthew Alesci
7,465 Points<body>
<p>hello world</p>
</body>
you use the 3 ``` and leave a line of space before you paste your code
Matthew Alesci
7,465 Pointsand close it with 3 ```
Sean Amador
500 PointsThis is my main.css
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%;
}
h3 {
margin 0 0 1em 0;
}
/*****************************************
HEADING
******************************************/
header {
float: left;
marin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa one', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.90em;
margin: -5px 0 0;
font-weight: normal;
}
h3 {
padding: 0 0 1em 0;
}
/*****************************************
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;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*****************************************
FOOTER
******************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 40px;
height: 40px;
margin: 0 5px;
}
/*****************************************
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: #bdc3c7;
}
/*****************************************
PAGE: ABOUT
******************************************/
.profile-photo {
display: block;
max-width: 500px;
margin: 20px auto 30px auto;
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 test */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/*Nav post click color*/
nav a, nav a:visited {
color: #fff;
}
/*Nav hover and selected color*/
nav a.selected, nav a:hover {
color: #32673f;
}
The problem is the About page .profile-photo top margin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sean Amador | Designer</title>
<link href="normalize.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:700italic,400,700,800' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Sean Amador</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="Sean Sitting.jpg" alt="Photograph of Sean Amador" class="profile-photo">
<h3>About</h3>
<p> Hi I'm Sean Amador! This is my design portfolio where I share all of my favorite work. When im'm not designing things, I enjoy exercising, playing videogames, drinking good coffee, and more.</p>
<p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/SeanAmador777">@SeanAmador777</a>
</section>
<footer>
<a href="http://facebook.com" alt="">
<img src="img/facebook.png" alt="Facebook Logo" class="social-icon">
</a>
<a href="http://twitter.com" alt="">
<img src="img/twitter.png" alt="Twitter Logo" class="social-icon">
</a>
<p>© 2015 Sean Amador.</p>
</footer>
</div>
</body>
</html>
Matthew Alesci
7,465 PointsI apologize looked through your code quite a while and couldn't find anything. I could be missing something.
Sean Amador
500 PointsThank you for trying Matthew, I don't see the issue either. Thanks again.
Matthew Alesci
7,465 PointsThere is an <p> tag not closed towards the bottom of your document but I changed it in my text editor and it didn't fix anything.
Sean Amador
500 PointsOh good eye, thank you.
Matthew Alesci
7,465 PointsHey i found the solution!!! In your header styles under the heading comment you misspelled margin. You put marin instead of margin. Sometimes the most annoying bugs in coding are the simplest things to fix. Hope that helps though!
Sean Amador
500 PointsMr. Alesci,
You sir are a beast, thank you for your dedication and help. I cant believe somtething so simple made it such a pain to fix.
You Rock Man
Sean Amador
500 PointsSean Amador
500 Pointshow do i do that? lol. I'm using dreamweaver