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 ibrahim Warsame
ibrahim Warsame
7,803 Points

Margin problems.

can anyone tell me why there is still white space at the top of the page. here is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="..\css\normalize.css">
    <link rel="stylesheet" type="text/css" href="..\css\main.css">
    <title>Delux | shampoo</title>
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Delux shampoo</h1>
        <h2>the best.</h2>
      </a>
        <nav>
          <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
       <ul id="gallery">
         <li>
          <a>
            <img src="..\images\against-dandruf.jpg" alt="This image is about shampoo products.">
            <p>The best shampoo for your child.</p>
          </a>
         </li>

         <li>
          <a>
            <img src="..\images\cool-hair.jpg" alt="This image is about shampoo products.">
            <p>Makes your hair soo cool that girls will be all over you.</p>
          </a>
         </li>

         <li>
          <a>
            <img src="..\images\good-one.jpg" alt="This image is about shampoo products.">
            <p>You can have the smae product in different shapes and designs.</p>
          </a>
         </li>

         <li>
          <a>
            <img src="..\images\shampoo.jpg" alt="This image is about shampoo products.">
            <p>We even have! a shampoo that gives you energy, aka "Energy Shampoo"</p>
          </a>
         </li>

         <li>
          <a>
            <img src="..\images\shampoos.jpg" alt="This image is about shampoo products.">
            <p>We have a hall storage of different hair prodcuts that you, YES!!!, i mean you can buy.</p>
          </a>
         </li>

         <li>
          <a>
            <img src="..\images\shower.jpg" alt="This image is about shampoo products.">
            <p>When showering using "our" products, it dosent feel like showering, it feels like heaven.</p>
          </a>
         </li>
       </ul>
      </section>

      <footer>
        <a><img src="..\images\twitter.png" alt="twitter-logo" class="footerimg"></a>
        <a><img src="..\images\facebook.png" alt="facebook-logo" class="footerimg"></a>
        <p>&#64;2017 Ibrahim Warsame.</p>
      </footer>
    </div>
  </body>
</html>


'''


the css code:



```css

/**********************************
GENERAL THINGS AND MORE STUFF.
**********************************/

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

li {
  list-style: none;
}

img {
  max-width: 100%;
}

a {
  text-decoration:none;
}
/**********************************
STYLING THE HEADER.
**********************************/

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

header{
  text-align: center;
}

header {
  background-color:green;
}

#logo{
  color: white;
  margin:0
}
/**********************************
STYLING THE NAVIGATION BAR.
**********************************/

nav ul {
  list-style:none;
  margin:0 10px;
  padding:0;

}

nav li {
  display:inline-block;

}

nav {
  background-color:#05c405; 
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
  color: white;
}
/**STYLING THE IMAGE GALLERY.**/
#gallery li {
  float: left;
  max-width: 45%;
  padding: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
/**********************************
 STYLING: THE GALLERY.
**********************************/

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

#gallery li:nth-child(3n)  {
            clear: left;
    }

#gallery li:nth-child(5n)  {
            float: right;
    }

#gallery img {
  height: 200px;
}
/**********************************
STYLING THE FOOTER.
**********************************/

footer {
  clear:both;
}

.footerimg {
  height: 20px;
  width: 20px;
  margin: 0 5px;
}

I hope someone can solve this.

Ibrahim

3 Answers

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

It's a collapsed margin created by both the body and the gallery list.

To get rid of both, add this to your CSS:

body, #gallery { margin-top: 0; margin-bottom: 0}
ibrahim Warsame
ibrahim Warsame
7,803 Points

I dont know why, but it didn't work for me.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

I may have missed something trying to decipher the unformatted code. Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:

Or better yet, make a snapshot of your workspace and post the link to it here.

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Now that markdown is no longer scrambling your code, I analysed the issue again and revised my answer so it effectively removes the unwanted margins.

ibrahim Warsame
ibrahim Warsame
7,803 Points
ibrahim Warsame
ibrahim Warsame
7,803 Points

Thanks for trying to help me, but i solved the problem by doing this:

header {margin-top: -17px;}
Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

Just be aware that this fix doesn't remove the extra margins, it just compensates for them. So it is "brittle" in the sense that later code changes may defeat it.

And you might still want to fix your code formatting for the benefit of students that may read this later. Those marks need to be accents (```), not apostrophes (''').

ibrahim Warsame
ibrahim Warsame
7,803 Points
ibrahim Warsame
ibrahim Warsame
7,803 Points

alright, i will just do that :)