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

HTML

Posted by J V
J V
4,471 Points

Margins and padding will not go away despite css reset on a simple web page.

Okay, I've done this before with Nick Petit. I am using a css reset. The practice site is not too different from what I've already done, but for some reason my header is not filling up the entire page like it did before! There is this stubborn margin above my header element that will not go away no matter what I do...

Why did it work in the How to Make a Website project and not now?

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dobereich | Dobermann and Pug Breeder</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header class="main-header">
            <a href="index.html" id="main-logo">
                <h1>Dobereich</h1>
                <span>Permanent Registered Kennel</span>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="dobermanns.html">Dobermanns</a></li>
                    <li><a href="pugs.html">Pugs</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="blog.html">Blog</a></li>
                </ul>   
            </nav>
        </header>

        <div id="container">
            <section>
                <h2>Welcome to Dobereich</h2>
                <h3>Permanent registered kennel</h3>
                <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
            </section>
            <section>
                <span>Click the photos below to learn more about our dogs.</span>
                <img src="http://dobereich.com/images/562_ad3-email.jpg" alt="Picture of Dobermanns">
                <img src="http://dobereich.com/images/562_Pugs-13wks.2.jpg" alt="Picture of Pugs">
            </section>
            <footer>
                <p>&copy; 2016 Dobereich</p>
            </footer>
        </div>

    </body>
</html>

CSS - I just copied from my previous lesson to make sure I wasn't doing anything wrong.

.main-header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
  background: tomato;
}

I also have a separate stylesheet called normalize.css (fyi)

J V
J V
4,471 Points

ALSO.. if I do the following, it will fix the issue. But why did I not have to do it before? I'm using the same computer and browser..

* {
  margin: 0;
}

4 Answers

Riku S.
Riku S.
11,322 Points

Ok here's the problem.

When you float your header, it comes out of normal document flow. Without clearing this float, heading 2 margin will affect on top of header as well.

#container {
  clear: left;
}
Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

Is your normalize.css linked correctly? Make sure that it's located at css/normalize.css

J V
J V
4,471 Points

Yes it's definitely right. I have no idea what I'm doing wrong.

Riku S.
Riku S.
11,322 Points
Riku S.
Riku S.
11,322 Points

If your site is online, send the link and we can have a look.

J V
J V
4,471 Points

It's not online yet. I'm using Brackets for Mac. Similar to Workspaces, but better IMO.

I'll try to import it to Workspaces later and hopefully you guys can take a look and help me out.

J V
J V
4,471 Points

Although it is the exact same code listed above, except that I have another styles heel called "normalize.css", nested in a "css" folder along with "main.css"

J V
J V
4,471 Points
J V
J V
4,471 Points

Okay I am just crazy... It may have just been that the Brackets App was acting up. This morning it worked no problem. Sucks because I was messing with it for at least 1.5 hours last night. Thanks for your help Riku!