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 rymatech
rymatech
4,671 Points

Why is there a white space at top of the page?

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="scripts.js"></script>
  <title>Ryan's Time Calculator</title>
</head>
<div class="header">
  <body>
    <header>Ryan McAvoy</header>
  </body>
</div>
</html>
          ```

   ```css
html, body, header {
  padding: 0;
  margin: 0;
}

.header {
  color: white;
  text-align: center;
  font-size: 50px;
  padding: 0;
  margin: 0;
  background-color: blue;
  border: solid red 5px;
}

          ```

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

There are apparently some invisible characters at the beginning of the lines. When I copy the above code and paste it into an editor, I see bullet symbols. Removing the bullets also removes the white area.

Also, the "body" element should be directly contained by the "html" element. The "div" enclosing it above is incorrectly placed.

rymatech
rymatech
4,671 Points

I can not see the bullet points you are referring to. I am using Atom as a code editor and deleted all spaces.

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

Try cutting the HTML from above and pasting into the HTML pane of codepen. Not all lines show up with a bullet, but about half of them do.

Here's the code after I removed the bullets (and fixed the body tags):

<head>
  <link rel="stylesheet" href="styles.css">
  <script src="scripts.js"></script>
  <title>Ryan's Time Calculator</title>
</head>

<body>
  <div class="header">
    <header>Ryan McAvoy</header>
  </div>
</body>
rymatech
rymatech
4,671 Points

Steven Parker Thanks, the issue is now resolved. Do you know how those invisible characters might have gotten there?

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

It's a mystery to me, but then I've never used Atom.. if you copied from there, perhaps it added them. Maybe there's a feature you can turn off or some special procedure for exporting code cleanly.

Serge Zant
Serge Zant
10,420 Points
Serge Zant
Serge Zant
10,420 Points

Consider using a reset for your CSS. I recomend you to copy the code from this site: https://meyerweb.com/eric/tools/css/reset/ at the top of your css file.

Did this solve your problem?