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

HTML How to Make a Website Adding Pages to a Website Add a New Page

Posted by nicholasmartin2
nicholasmartin2
7,172 Points

Text Pushing Against Edge of Browser Window

Hello, everyone! I've created an "About" page for the site that I'm building alongside Nick, and I'm encountering a paragraph text issue for this specific page. The text is pushing up against the left-hand side of the browser window (no spacing), and I'm not sure what to do about this, as it's not an issue on my "Portfolio" page. Nick's example also doesn't appear to have this issue.

I'm wondering if I've accidentally failed to do something in main.css or about.css. Also, I'm unable to load the original workspace for this lesson to compare my code to (I've been through this section before). Any help or insight would be greatly appreciated!

Relevant sections of main.css and about.html code posted below: 

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

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

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

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

<div id="wrapper">
      <section>
        <img src="img/nickm2.JPG" alt="Photo of Nick Martin" class= "profile-photo">
        <h3>About</h3>
        <p>Greetings. I'm Nick Martin! This is a personal site, built using educational materials and information provided by <a href="www.teamtreehouse.com">Treehouse</a>. This site serves as the first item in my coding portfolio.</p>
        <p>If you'd like to follow me on Twitter, my handle is <a href="https://twitter.com/X">@X</a>.</p>
      </section>
      <footer>
        <a href="https://twitter.com/X"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://facebook.com/martinnp"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2016 Nick Martin</p>
      </footer>
    </div>
Cathy Villa
Cathy Villa
8,097 Points
Cathy Villa
Cathy Villa
8,097 Points

In your general CSS for the wrapper it looks like you did not clear the float cascading from the header. Try clear:both; after your padding in #wrapper and see if that is it. Also you will want to create another #wrapper rule to align your text right or center.

1 Answer

Brandon Stovall
Brandon Stovall
10,450 Points
Brandon Stovall
Brandon Stovall
10,450 Points

I would recommend adding a clear:both to the wrapper Id you have created. The float:left set by the header takes the document out of the normal state of flow and content padding or margin is uneffective in its current iteration.

nicholasmartin2
nicholasmartin2
7,172 Points

Excellent! Thank you!