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

Sean Amador
Sean Amador
500 Points
Posted by Sean Amador
Sean Amador
500 Points

For 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
Matthew Alesci
7,465 Points
Matthew Alesci
Matthew Alesci
7,465 Points

would you be able to post your files?

Sean Amador
Sean Amador
500 Points
Sean Amador
Sean Amador
500 Points

how do i do that? lol. I'm using dreamweaver

Matthew Alesci
Matthew Alesci
7,465 Points
Matthew Alesci
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

Sean Amador
Sean Amador
500 Points
Sean Amador
Sean Amador
500 Points

This 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>&copy; 2015 Sean Amador.</p>
            </footer>
        </div>
    </body>
</html>
Matthew Alesci
Matthew Alesci
7,465 Points
Matthew Alesci
Matthew Alesci
7,465 Points

I apologize looked through your code quite a while and couldn't find anything. I could be missing something.

Sean Amador
Sean Amador
500 Points
Sean Amador
Sean Amador
500 Points

Thank you for trying Matthew, I don't see the issue either. Thanks again.

Matthew Alesci
Matthew Alesci
7,465 Points
Matthew Alesci
Matthew Alesci
7,465 Points

There 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
Sean Amador
500 Points
Sean Amador
Sean Amador
500 Points

Oh good eye, thank you.

Matthew Alesci
Matthew Alesci
7,465 Points
Matthew Alesci
Matthew Alesci
7,465 Points

Hey 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
Sean Amador
500 Points
Sean Amador
Sean Amador
500 Points

Mr. 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