Remove margin from pages

Question

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! ^^

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
– APAD1, Commented May 5, 2015 at 21:02
I am using Jekyll, so my CSS and HTML frame automatically loads the same onto each page. :/ — Mike Hovet
– Mike Hovet, Commented May 5, 2015 at 21:13
Just took a look at the live site, the issue is the margin on the H1 tag — APAD1
– APAD1, Commented May 5, 2015 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
– Mike Hovet, Commented May 5, 2015 at 21:23
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. — APAD1
– APAD1, Commented May 5, 2015 at 21:29

APAD1 · Accepted Answer · 2015-05-05 21:20:33Z

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.

answered May 5, 2015 at 21:20

APAD1

13.7k8 gold badges47 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Remove margin from pages

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related