After doing this section i noticed that there is white space along the portfolio and about page at the top

Question

After doing these steps to make the site responsive to the different width sizes there is a white space above the green header only on the portfolio and about pages, the contact page the green heading goes right to the top. I've scanned through both the main.css and the responsive.css for any type of spelling errors or if i left out ; or {} but all seems fine.

Answer 1 · 2014-11-07T17:09:21Z

November 7, 2014 5:09pm

You might need to put some CSS margin and padding on your elements to make that go away.

Without seeing your code that seems to be the most likely reason. Elements like paragraph tags and lists have their default styling. :-)

Answer 2 · 2014-11-22T11:15:13Z

November 22, 2014 11:15am

I have whitespace at top of about page and my envelope is missing next to the email link. The img is in the img folder and the path is as given in the exercise. Help please. Has everyone noticed that the google fonts code now gives errors in W3c code below.

<!DOCTYPE html> <html>

<head> <meta charset="utf-8"> <title>Tony Walker | Web Designer</title> <link rel="stylesheet" href="css/normalize.css" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css" type="text/css"> <link rel="stylesheet" href="css/responsive.css" type="text/css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>

<header>
 <a href=index.html id="logo"> 
  <h1>Tony Walker</h1>
  <h2>Web 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="img/tony.jpg" alt="Photograph of Tony" class="profile-photo">
    <h3>About</h3>
    <p>Hi, my name is Tony Walker. This is an experimental portfolio website created using Treehouse Inc. This is an excellent website which lets students join for a small monthly fee and gives you access to loads of different computer courses including Web Design, PHP, Swift and the like. Enjoy!. This is me sitting out at Ratho at the climbing centre, tapping away on my laptop creating this site.</p>
  </section>

  <footer>
    <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
    <a href="http://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
    <p>&copy; 2014 Tony Walker.</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%; }

a { text-decoration: none;

}

a { color: #6ab47b; }

img { max-width: 100%; }

h3 { margin 0 0 1em 0; }

/*************************************** 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: 'Changa One', 'Open Sans', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; font-weight: normal; margin: -5px 0 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; }

/*********************************** Page About ************************************/

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

/*********************************** Page Contact ************************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display:block; min-height:20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 40px; margin: 0 0 20px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); } /**************************************** COLOURS *****************************************/

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

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

} h1, h2 { color: #fff; }

nav { background: #599a68;

} nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover {

color: #32673f; }

responsive.css

@media screen and (min-width: 480px) {

/*********************************** Two column layout *********************************/ #primary { width: 50%; float: left; } #secondary { width: 40%; float: right; } /******************************** Portfolio page ************************************/

#gallery li { width: 28.3333%; } #gallery li:nth-child(4n) { clear: left; }

.profile-photo { float: left; margin: 0 5% 80px 0; } }

@media screen and (min-width: 660px) { nav { background: none; font-size: 1.125em; float: right; margin-right: 5%; text-align: right; width: 45%; }

#logo { float: left; margin-left: 5% text-align: left; width: 45%; } h1 { font-size: 2.5em; } h2 { font-size: 0.825em; margin-bottom: 20px; } header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }

}