Padding-top and height of <p> disappear under two siblings above

Question

I am working on a blog site using WordPress and Susy grids. There is a <p> tag (with mild profanity) near the top of the page (link) with padding-top: 4em. Somehow this padding is slipping up under the previous two siblings, an <h1> and a <div>. The html is as follows:

<h1 class="entry-title">A Manifesto, of Sorts</h1>
    <div class="entry-meta">
        <span class="posted-on"><a href="http://howtolearnalanguagelikeaboss.com/?p=6" rel="bookmark"><time class="entry-date published updated" datetime="2015-11-22T02:07:31+00:00">November 22, 2015</time></a></span>       </div><!-- .entry-meta -->
</header><!-- .entry-header -->

<div class="entry-content">
    <p id="manifesto">F--- Berlitz. F--- Rosetta. Do it yourself and do it in style.</p>

The style on this element is as follows:

#manifesto {
  text-align: center;
  font-style: italic;
  font-weight: 300;
  padding: 2em 0 1em 0;
}

I can tell, using the Chrome inspector, that the <p> is both really tall and that the padding-top (the green-highlighted area in the inspector) is way above the <h1> sibling. I am stumped... I tried margin-top and the same issue happened. Can anyone explain what is going wrong? My styles are not too complicated, I don't think, so I am not sure what could be conflicting. Any help would be very much appreciated.

Thanks,
Dave

Answer 1

In main.css:457,458:

header {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

There is a float: left; on the header. This effectively takes it out of the normal flow of content. Either stop floating that header element, or do a clear after it.