Why do I have extra space in a grid row?

Question

I am trying to recreate a media object like the first example here https://codepen.io/rachelandrew/pen/zwMZVy

But for some reason, the first row has extra space after the h2. I copied the CSS to see if that would work but it did not. I'd like for the p to be right below the h2 as it is in the example.

    .img {grid-column: 1;
          grid-row: span 2}

    h2 {grid-column: 2;
        grid-row: 1;}

    p {grid-column: 2;
       grid-row: 2;}

    footer {grid-column: 1 / -1;
            grid-row: 3;}

    .wrapper {border: 2px solid lightgrey;
              padding: 20px;
              display: grid;
              grid-column-gap: 10px;
              grid-template-columns: 150px 3fr;
              grid-template-rows: auto 1fr auto;}

    img {max-width: 100%;
        height: auto;
        display: block;}

    h2,
    p {margin: 0 0 1em 0;}

<div class="wrapper">
   <div class="img">
    <img src="https://images-na.ssl-images-amazon.com/images/I/71ykS5obm%2BL._SY355_.jpg">
  </div>
  <h2>Header</h2>
  <p>Content</p>
  <footer>Footer</footer>
</div>

Answer 1

h2,
p {
  margin: 0 0 1em 0;
}

The margin shorthand you're using here is:

h2,
p {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 1em;
  margin-left: 0;
}

(in that order). You've got 1em margin underneath your heading. That's gonna put a space after you header. Just replace it with margin: 0;. Or, move h2 to another CSS declaration if you want to keep the margin on your paragraphs.