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 Daniel Stockham
Daniel Stockham
10,277 Points

The white space of death again...

I have encounter this and fixed it before and now I am still at my wits end. I keep getting the white stripe at the top of my page.

'' /CSS/

body { margin: 0;

}

wrapper{

background-color: whitesmoke;
height:100%;

}

main {

align:center;
height:100%;

}

/HTML/

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Newsletter</title> <link rel="stylesheet" href="newsletterCSS.css"> <meta name="viewport" content="width=device-width, inital-scale=1.0"> </head> <body> <div id="wrapper"> <p>@Just Free</p> <a href="#">visit website</a>

    <div id="main">
      <h1>Get started with us !</h1>
      <p>You are welcome to use this newsletter however you wish.</p>
      <img src="practicePSD/practiceNewsletterPSD.png" alt="image is broken">
      <p>Hi there! The new Analytics Freebie is coming to dribble by the end of the week. Just wanted to let you know about our new promotion.</p>

      <p>Today <span>we are offering you a freebie</span> for free - brand new promotion for all new subscribers. Keep reading for more information. Also visit our website.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales consequat erat. Vivamus dictum lectus et quam aliquet aliquam. In hac habitasse platea dictumst. Donec maximus ultrices egestas. Mauris dictum purus velit, at imperdiet sem consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor et magna at ullamcorper. Phasellus pretium nibh eget libero rutrum, eu faucibus lorem tempus. Sed condimentum nisl condimentum risus sollicitudin, vitae iaculis nisl malesuada.</p>

      <button>Start Free Trial - 2 Months!</button>

      <p>01/454-3687</p>
      <a href="mailto:info@help.com">info@help.com</a>

      <p>Get in touch if you have any questions regrading our new product. Feel free to contact us 24/7. We are here to help.</p>

      <span>All the best,</span>
      <span>@JustFree</span>
     </div>
    <footer>
      <div id="disclosure">You are receving this newsletter because you subscribed to our mailing list via: freebies.com</p>
      </div>
      <div id="socialMedia">
        <img id="facebook" src="">
        <img id="twitter" src="">
        <img id="google" src="">
      </div>
      <nav> 
        <ul>
          <li><a href="">Unsubscribe</a></li>
          <li><a href="">Visit FAQ</a></li>
        </ul>
      </nav>
    </footer>
    </div>

</body> </html> '

1 Answer

mikes02
mikes02
Courses Plus Student 16,968 Points

It's due to the default margin on the first paragraph in your HTML containing "Just Free". You could remove that. Also, align: center on the #main div will not do anything, if you want it centered you will need to apply a width and use margin: 0 auto. Or if you want the entire layout centered you could apply that same logic to the wrapper div. For example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Newsletter</title>
  <link rel="stylesheet" href="newsletterCSS.css">
  <meta name="viewport" content="width=device-width, inital-scale=1.0">
  <style>
  body {
    margin: 0;
  }
  #wrapper {
    background-color: whitesmoke;
    margin: 0 auto; 
    width: 940px;
    height:100%;
  }
  #wrapper p {
    margin: 0;
  }
  #main {
    height:100%;
  }
  </style>
</head>
<body>
<div id="wrapper">
    <p>@Just Free</p>
    <a href="#">visit website</a>

    <div id="main">
      <h1>Get started with us !</h1>
      <p>You are welcome to use this newsletter however you wish.</p>
      <img src="practicePSD/practiceNewsletterPSD.png" alt="image is broken">
      <p>Hi there! The new Analytics Freebie is coming to dribble by the end of the week. Just wanted to let you know about our new promotion.</p>

      <p>Today <span>we are offering you a freebie</span> for free - brand new promotion for all new subscribers. Keep reading for more information. Also visit our website.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sodales consequat erat. Vivamus dictum lectus et quam aliquet aliquam. In hac habitasse platea dictumst. Donec maximus ultrices egestas. Mauris dictum purus velit, at imperdiet sem consequat et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris tempor et magna at ullamcorper. Phasellus pretium nibh eget libero rutrum, eu faucibus lorem tempus. Sed condimentum nisl condimentum risus sollicitudin, vitae iaculis nisl malesuada.</p>

      <button>Start Free Trial - 2 Months!</button>

      <p>01/454-3687</p>
      <a href="mailto:info@help.com">info@help.com</a>

      <p>Get in touch if you have any questions regrading our new product. Feel free to contact us 24/7. We are here to help.</p>

      <span>All the best,</span>
      <span>@JustFree</span>
     </div>
    <footer>
      <div id="disclosure">You are receving this newsletter because you subscribed to our mailing list via: freebies.com</p>
      </div>
      <div id="socialMedia">
        <img id="facebook" src="">
        <img id="twitter" src="">
        <img id="google" src="">
      </div>
      <nav> 
        <ul>
          <li><a href="">Unsubscribe</a></li>
          <li><a href="">Visit FAQ</a></li>
        </ul>
      </nav>
    </footer>
    </div>
</body>
</html>