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 Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points

margin problems

i´ve done the "how to make a website" course and i started to code my own website , but i had some issues . I set the margin to 0 and there is a white space between the toolbar of the browers and the nav , can anyone solve it .

this is the code i ´ve used :

.heading {

width: 100%; margin: 0 0; float: none; background-color: #34495E; color: #F9BF3B; height: 335px; text-align: center;

}

6 Answers

highlandcow
highlandcow
7,352 Points
highlandcow
highlandcow
7,352 Points

Remove the margins from the body

body {
    margin: 0;
}
highlandcow
highlandcow
7,352 Points

FYI - This code was included in the normalize stylesheet in the course. http://nicolasgallagher.com/about-normalize-css/

Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points

it doesn´t work , any suggest ,

highlandcow
highlandcow
7,352 Points

Could you post all of your HTML and CSS?

Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points

how can i post it , i´m new on this platform

Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points 
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">
<title> Luis Moreno </title
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<meta name="viewport" content="width=device-width , initial-scale=1.0">
</head>

<body>

  <header>

   <div class="heading">

    <h1> Luis Moreno </h1>
    <span>

   </div>

  <nav>

<ul>

  <li>

    <a href="skills.html">

    <img src="code.png" alt "code icon">

    <p> Skills </p>

    </a>


  </li>


  <li>

    <a href="gaming.html">

    <img src="controller.png" alt "controller icon">

    <p> Gaming </p>

    </a>


  </li>


  <li>

    <a href="index.html">

    <img src="i.png" alt "i icon">

    <p> Index </p>

    </a>


  </li>


  <li>

    <a href="skills.html">

    <img src="github.png" alt "Git hub icon">

    <p> Github </p>

    </a>


  </li>


  <li>

    <a href="works.html">

    <img src="hammer.png" alt "hamer icon">

    <p> works </p>

    </a>


  </li>

</ul>

  </nav>


  </header>

  <div class="my-self">
  <section>

  <img src="img/avatar.jpg" alt="avatar" class="profile-photo">
  <h3>About my self</h3>
  <p> hi , I am Luis Moreno .  I ´m a Front-End developer , i enjoy writing javascript code such as node , ember , angular and i´m learning react , if you want to know more about my programing skills , click the "</>" icon on the nav ,
  when I ´m not on the internet , i enjoy hanging out with my friend , play videogames , play basketball ... THE USUAL THINGS   </p>
  <p>if you want to follow me on twitter , my user name is <a href="http://twitter.com/luismorenopernil">@luismorenopernil </a> </p>
  </section>

</div>


<footer>

<a href="http://twitter.com/luismorenpernil"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://twitter.com/luismorenpernil"><img src="img/Github-wrap.png" alt="Git hub Logo" class="social-icon"></a>
<p> &copy; 2015 Luis Moreno Pernil.</p>


</footer>


</body>









</html>


            ```
Rafael Peralta Jr
Rafael Peralta Jr
21,879 Points
Rafael Peralta Jr
Rafael Peralta Jr
21,879 Points

I would suggest using the Inspector Tool on your browser to determine what is causing the problem. There might be some default padding or margin issue somewhere.

Andreas Anastasiades
Andreas Anastasiades
2,916 Points
Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Your margin is set to the .heading div Possibly there's still some margin or padding left on the header itself?

Also, a lot of your images their alt tags have an error, you used a whitespace in stead of the = sign

Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points
Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points

hi , guys . i set the top margin to -21px and it dispeared , thanks (everyone)

Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points
Luis Moreno Pernil
Luis Moreno Pernil
3,275 Points

hi , guys . i set the top margin to -21px and it dispeared , thanks (everyone)

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

@ luis moreno pernil

There's a few problems with the markup you posted. For example, the title tag is not closed properly.

<title> Luis Moreno </title

In addition, your alt attributes on images don't have an equal sign between the alt keyword and the double quotes. This is not valid markup:

<img src="code.png" alt "code icon">

Instead, you need to change all instances of these and add an equals sign, like this:

<img src="code.png" alt="code icon">

You also have an inline element that's not properly closed:

    <h1> Luis Moreno </h1>
    <span>

That span element that's not closed could be causing the entire page to be rendered as an inline element, instead of a block level element, so styling might not be applied correctly.

Once you've fixed all these problems, try running your code through the W3C's markup validation service to check for additional errors. If the problem still isn't fixed and you're still seeing the extra page margin, post your code here again as a new answer.