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

Johnathan Wenske
Johnathan Wenske
3,410 Points
Posted by Johnathan Wenske
Johnathan Wenske
3,410 Points

The About Page

For some reason my paragraph and h3 are do not have the padding around it like your's does in the video. I'm not sure where I went wrong in the coding. I'll keep checking but if you have any suggestions on where to look that would be helpful!

Thanks, Johnathan

3 Answers

Marcin Robert Kaźmierczak
Marcin Robert Kaźmierczak
33,570 Points
Marcin Robert Kaźmierczak
Marcin Robert Kaźmierczak
33,570 Points

Please paste some code for this or link to te challenge :)

Johnathan Wenske
Johnathan Wenske
3,410 Points
Johnathan Wenske
Johnathan Wenske
3,410 Points

From the HTML:

<body> <header> <a href="index.html" id="logo"> <h1>Johnathan Wenske</h1> <h2>Art Director</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="Image/nick.jpg" alt="Nick Profile Photo" class="profile-photo"> <h3>About</h3> <p>This is the spot to talk about myself and tell everyone what a wonderful person I am. </p> <p>If would like to follow me on twitter, you may do so here: <a href="https://twitter.com/JohnathanWenske">@JohnathanWenske</a></p> </section> <footer> <a href="https://twitter.com/JohnathanWenske"><img src="Image/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com/johnathan.wenske"><img src="Image/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Johnathan Wenske. All Rights Reserved.</p> </footer> </div> </body>

Johnathan Wenske
Johnathan Wenske
3,410 Points
Johnathan Wenske
Johnathan Wenske
3,410 Points

From the CSS:

/********************************** GENERAL STYLING **********************************/

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%; }

/********************************** HEADING **********************************/

header { margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

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; }

logo {

text-align:center;
margin: 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: 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; }

/********************************** COLORS **********************************/

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

/* links */ a{ color: #6ab47b; }

/* Green Header */ header { background: #6ab47b; border-color: #599a68; }

/* Logo Text */ h1, h2 { color: #ffffff; }

/* Nave Background on MOBILE DEVICES */ nav{ background: #599a68; }

/* Color for Nav Link */ nav a, nav a:visited { color: white; }

/* Selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

/****************************** ABOUT PAGE ******************************/

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

h3 { margin: 0 0 1em, 0; }

Johnathan Wenske
Johnathan Wenske
3,410 Points
Johnathan Wenske
Johnathan Wenske
3,410 Points

I FIGURED IT OUT! I didn't have 'px' next to my padding number under the wrapper id tag in the CSS. Sorry to pile all that on you but thank you for helping!