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 Add a New Page

CJ Jugarap
CJ Jugarap
2,517 Points
Posted by CJ Jugarap
CJ Jugarap
2,517 Points

When creating the about page, the profile picture and text are not centered and the text does not wrap.

about.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CJ Jugarap | Rails Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
   <link href='http://fonts.googleapis.com/css?family=Roboto:400,400italic,700,700italic,900,900italic,500,500italic|Open+Sans:400italic,600italic,700italic,800italic,400,700,600,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>CJ Jugarap</h1>
        <h2>Rails Developer</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="Photograph of Nick Pettit" class="profile-photo">
        <h3>About</h3>
        <p>Hi, I'm CJ!  This is my design portfolio of all my favorite work.  When I'm not designing things, I like to exercise, play video games, travel, eat delicious foods, and overall have a great time.</p>
        <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/cjjugarap">@cjjugarap</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; 2014 CJ Jugarap.</p>
      </footer>
    </div>
  </body>
</html>

main.css

/********************************
GENERAL
********************************/

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

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  width: 100%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}



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

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

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Roboto', 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;
}


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

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

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

/* nav background on mobile devices */
nav {
  background: #599a68; 
}

/* logo text */
h1, h2 {
  color: #fff; 
}

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

/* nav link */
nav a, nav a:visited {
  color: #fff; 
}

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

2 Answers

Jack Blankenship
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points
Jack Blankenship
.a{fill-rule:evenodd;}techdegree seal-36
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 Points

You are missing the entry for your class profile-photo in your main.css. Actually, it looks like you have dropped the entire section for the About page.

Another issue looks like you have both a max-width: 940px; and a width: 100%; in your #wrapper that is causing a text wrapping problem.

CJ Jugarap
CJ Jugarap
2,517 Points
CJ Jugarap
CJ Jugarap
2,517 Points

Thank you Jack! Realized I needed to just move on to the next video which finished off the entry for the class profile-photo in the main.css as well as removed the width: 100%.