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

Posted by Rich Braymiller
Rich Braymiller
7,119 Points

No space on the left margin area of my h3/p text of the about.html page

i hope I am explaining this correctly but there is no space on the left margin/padding area of my h3/p text. its pushed to the left.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Rich Braymiller | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Rich Braymiller</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">Contact</a></li> </ul> </nav>
</header> <div id-"wrapper"> <section> <img src="img/rich1.jpg" alt="Photograph of me" class="profile-photo"> <h3>About</h3> <p>Hi I'm Rich Braymiller, this is my first website design with Team Treehouse, hopefully this is just a start of great things to come!</p> <p>If you would like to follow me on twitter, my username is <a href="http://twitter.com">@rwb3456</a>.</p>

   </section>
   <footer>
    <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon">
      </a>
    <a href="http://facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon">
      </a>
    <p>&copy; Rich Braymiller</p> 
  </footer>
</div>

</body> </html>

/****************************************** General *******************************************/

p { margin: 0 0 0 2px; }

/* site body */ body { background-color: #fff; color: #999; }

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

wrapper {

max-width: 930px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%;

}

h3 { margin: 0 0 1em 0;

}

/****************************************** Heading *******************************************/

header { background: #6ab47b; border-color: #599a68; float: left; margin: 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.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;

}

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: 20px; height: 20px; 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: 150px; margin: 0 auto 30px; border-radius: 20px;

}

/****************************************** Colors *******************************************/

header { color: #6ab47b; border-color: #599a68; }

/* Nav Background on mobile devices */ 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; }

5 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Rich,

I can't spot a reason style wise but I notice in your HTML you have this:

<div id-"wrapper">

Try replacing the hyphen with an equals, e.g.

<div id="wrapper">

Does this make any difference?

-Rich

Rich Braymiller
Rich Braymiller
7,119 Points

Thanks Rich. I fixed that, but it didn't do anything.

Rich Bagley
Rich Bagley
25,869 Points

Ah. Does your profile photo appear above the h3 when displayed in the browser?

-Rich

Rich Braymiller
Rich Braymiller
7,119 Points
Rich Braymiller
Rich Braymiller
7,119 Points

yes it does...

Rich Bagley
Rich Bagley
25,869 Points

Is this local or do you have it uploaded anywhere so we can see how it looks? Either that or possibly a screenshot?

Thanks

-Rich

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

It seems that you are missing the media query:

@media screen and (min-width: 580px) {
    /***********PAGE: ABOUT************/
    .profile-photo {
        float: left;
        margin: 0 5% 80px 0;
    }
}
Rich Braymiller
Rich Braymiller
7,119 Points

I'm sorry, don't recall that ever being in the tutorial, not at my level anyways...

Rich Braymiller
Rich Braymiller
7,119 Points
Rich Braymiller
Rich Braymiller
7,119 Points

Rich, this is local. I am not quite sure how to upload a screenshot?

Rich Bagley
Rich Bagley
25,869 Points

Hi Rich,

You could use something like Dropbox and this will detail how you include that in a post but for now we'll try without.

Just wanted to confirm the issue was that you wanted a space to the left of the h3 tag. Reason I ask is that I can see these in your CSS:

p { margin: 0 0 0 2px; }

The above is saying that all paragraph tags should have a 2px left margin.

wrapper {max-width: 930px; margin: 0 auto; padding: 0 5%; }

The above is saying that the wrapper should be 930px wide with in the center of the screen with a padding of 0.5% either side.

h3 { margin: 0 0 1em 0;}

The above is saying that all h3 tags should have a bottom margin of 1em.

Is your text flush to the left edge of your browser? If so I think your file may be caching as before. When you changed it from:

<div id-"wrapper">

to:

<div id="wrapper">

...it should have activated the styles. If anything, the paragraph tags should be slightly indented that's all.

-Rich

Kallil Belmonte
Kallil Belmonte
35,561 Points
Kallil Belmonte
Kallil Belmonte
35,561 Points

I picked up this code from the finished project, I think that it appears on the: Responsive Web Design and Testing.

The code will appear like this: http://codepen.io/anon/pen/yyvZRr