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 Zubair Siddique
Zubair Siddique
4,889 Points

I tried everything to remove weird top margin above header...but?

A white horizontal space above the header across the screen................I did everything but it doesn't disappear.

Something is terribly wrong with 'header' and 'section' content. When i "comment out" the section part, everything alright. But when i remove commenting, thin white space above the header again comes back, smiling!

I tried:

html, body {margin top zero}

I tried:

.header:after {content: ""...................display: table................. clear: both;}

I tried:

h1 {margin top zero}

In short, i tried everything. I'm stuck! Help me someone please! I want that unnecessary top margin removed from above my header.

5 Answers

Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points

I agree with Craig Watson that you need to change the ul to this:

<ul class="menu">
          <li><a href="#">blog</a></li>
          <li><a href="#">articles</a></li>
          <li><a href="#">webinars</a></li>
          <li><a href="#">contact</a></li>
        </ul>

But you just need to add this to the css, its because of the normalize.css and the section is set to display block and that causes the problem.

section {
display: inline-block;
}
Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Zubair,

Can you kindly post your code, or if using workspaces, take a quick snapshot using the camera icon in the top right and post the link.

I will happily have a look through it and help to sort this with you :)

Craig

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Great thanks!

below I have made a few changes that should take care of things and have noted the changes made in comments :)

  <body>

    <header class="main-header group">

      <!-- Change the order to suit syntax ( ul, li, a ) -->
      <nav>
        <!-- Added Class for css -->
        <ul class="menu">
          <li><a href="#">blog</a></li>
          <li><a href="#">articles</a></li>
          <li><a href="#">webinars</a></li>
          <li><a href="#">contact</a></li>
        </ul>
      </nav>

      <h3><span class="insta">insta</span><span class="blogging">blogging</span></h3>

      <!-- Origional hr Tag
      <hr width="7%" size="1" color=#ffcba7 noshade>
      -->

      <!-- Use css file to add styles to this class from above -->
      <hr class="hr-custom">

      <!-- Added heading specific class to help with css -->
      <h1 class="main-heading">Hell, <span class="fromto">from</span> <span class="abcxyz">ABC</span> <span class="fromto">to</span> <span class="abcxyz">XYZ</span></h1>

    </header>

    <section>

      <p>From registering domain name, hosting and designing to writing posts.</p>

    </section>

    <footer>
    </footer>

  </body>

In your css add the following:

.main-heading {
  margin-top: 0;
}

.menu {
  margin: 0;
}

From what I can see this would take care of any buggy top white space, it usually does come from a h1 at the top of the page which just wants it margin adjusting.

If you add some padding to its wrapper, so in your case the header element so say:

header {
  padding: 40px 12%;
}

This will do the job of dropping the first h1 down a little. (I do this all the time)

I hope this helps you out Craig

Zubair Siddique
Zubair Siddique
4,889 Points
Zubair Siddique
Zubair Siddique
4,889 Points

Yea, of course! Here it is...

https://w.trhou.se/8ebj9rd7ov

Zubair Siddique
Zubair Siddique
4,889 Points
Zubair Siddique
Zubair Siddique
4,889 Points

Thanks a lot Craig Watson. I modified my code as you instructed. I appreciate a lot. You told me how to code professionally and cleanly.

The most interesting thing is, what solved my problem is when i acted upon Mikkel's last advice about section, it solved the problem. So, thanks to Mikkel Rasmussen.

Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points
Mikkel Rasmussen
Mikkel Rasmussen
32,971 Points

So why is it you gave Craig Watson the best answer then that didn't solved the problem ?