Question

This is my CSS:

  header {
    hgroup {
      background: #1F1E1E;
      height: 100px;

      padding: 0px;
      margin: 0px;

      color: #FEFFFE;

      font-family: Arial, Helvetica, sans-serif;
      font-size: 1em;

      h1,h2 {
        padding: 0px;
        margin: 0px;
      }
    }

    nav {
      background: #FEFFFE;
      height: 60px;

      padding: 0px;
      margin: 0px;

      -webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.2);
      -moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.2);
      box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.2);

      ul {
        list-style: none;
        padding: 0px;

        li {
          float: left;
          padding: 20px 30px 20px 0px;
        }
      }
    }
  }

And this is my HTML:

<header>
    <hgroup>
        <h1>Lorem Ipsum</h1>
        <h2>Lorem ipsum dolor sit amet.</h2>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <div class="clearfix"></div>
</header>

The end result is this:

As you can see, there is a gap between the hgroup and the nav tag. I can’t seem to figure out how to remove that. I’ve already tried putting padding: 0px; and margin: 0px; on almost every place that I think will remove it but to no avail. What can I do?

If you’re asking why my CSS is structured like that, it’s because I’m using LESS.

Answer 1

Your ul might have a margin, try adding margin:0 to it 🙂