3

I am trying to build a navigation bar, but I'm having trouble implementing a solution that removes the margin, but it only removes it from my homepage. I have tried the suggestions, including the top rated one from this question, and still nothing.

CSS: 

/**********************************
HEADING
**********************************/

header {

  float: left;

  margin: 0 0 30px 0;

  padding: 5px 0 0 0;

  width: 100%;

  background-color: #f00;

}

#logo {

  text-align: center;

  margin: 0;

}

/**************************
GENERAL
**************************/

body {

  background-color: grey;

  margin: 0;

  padding: 0;

}

a {

  text-decoration: none;

}

/**********************************
NAVIGATION
**********************************/

nav {

  text-align: center;

  padding: 10px 0;

  margin: 20px 0 0;

  background-color: #fff;

}

nav ul {

  list-style: none;

  margin: 0 10px;

  padding: 0;

}

nav li {

  display: inline-block;

}

HTML: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width initial-scale=1" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>AP World</title>
  <meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

  <link rel="stylesheet" href="/css/main.css">
  <link rel="canonical" href="http://yourdomain.com/">
</head>


<body>

  <header>
    <a href="" id="logo">
      <h1>AP World</h1>
    </a>
    <nav>
      <ul>
        <li><a href="/index.html">Home</a>
        </li>
        <li><a href="/songs">Songs</a>
        </li>
        <li><a href="/virgins">Virgins</a>
        </li>
      </ul>
    </nav>
  </header>

  <div class="page-content">
    <div class="wrapper">
      Homepage
    </div>
  </div>



</body>

</html>

Here is a link to my site. and a link to a JSFiddle

I am kind of new to web development, so any help is much appreciated! ^^

Community
  • 1
  • 1
Mike Hovet
  • 65
  • 7
  • Are you including the CSS for the navigation on every page? If it works on your homepage but not any of the other pages then either you are not using the same CSS or there is other CSS for the non-homepage pages that is overriding the CSS. – APAD1 May 05 '15 at 21:02
  • 1
    I am using Jekyll, so my CSS and HTML frame automatically loads the same onto each page. :/ – Mike Hovet May 05 '15 at 21:13
  • Just took a look at the live site, the issue is the margin on the `H1` tag – APAD1 May 05 '15 at 21:18
  • Thanks@APAD1! That fixed it! But I'm curious, how dows an h1 in the body, affect the margin in the header? – Mike Hovet May 05 '15 at 21:23
  • 1
    No problem! Basically what was happening was that you were floating the header, the browser views a floated element as having 0 height, so the margin from your H1 was pushing the header down. For your header, there's really no reason to float it since it's 100% width, however, you will likely run into this issue again in the future. The other way to resolve this (if you needed to float an element) would be to use a `clearfix` which you can [read about here](http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/). – APAD1 May 05 '15 at 21:29

1 Answers1

2

Remove float:left from your header CSS and it should resolve the problem. When you float an element, it takes it out of the DOM structure, so the margin from your H1 tag was being applied above the header even though the H1 is not part of the header.

APAD1
  • 13,509
  • 8
  • 43
  • 72