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](http://howtolearnalanguagelikeaboss.com/?p=6)) 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: 
In [main.css:457,458](http://howtolearnalanguagelikeaboss.com/wp-content/themes/susy-test/css/main.css):

```
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.
Try:

```
.entry-content {
    display: inline-block;
}

```