Paragraph text not recognising caption - masked by caption background

Hi Treehouse

Run into a bit of a tricky one today. I have a container in which I have a figcaption which encapsulates my h2. The figcaption itself has a background in it (which provides a nicer aesthetic than a simple colour, I think)

The HTML looks like this.

'<div class="container clearfix">
    <div class="primary col">
      <figcaption class="welcomecaption"><h2>Welcome</h2></figcaption>
      <p class="welcometext">Lorem ipsum dolor sit amet, suspendisse facilisi ridiculus in nonummy diam, quis proin placerat, fringilla orci donec, blandit sit.</p>

  </div>

Now.. the paragraph text within the "primary col" is not clearing the figcaption. In essence it is not recognising the space that the caption takes up, and thus some of the p text appears to be masked underneath the caption.

Here is a screenshot to illustrate what I mean: http://imgur.com/wwqcGU0

And another screenshot when the background image is not part of the caption: http://imgur.com/a/hdi7C - You can see how the p text is not honouring the caption.

The CSS looks like this:

.welcomecaption {
  height: 35px;
  background-image: url("../img/welcome.jpg");
  background-size: cover;
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;

  position: absolute;
  top: 0;    }

I've tried playing with the margins of both the paragraph text and the figcaption AND the h2. None of it seems to work. And it's not something I can work out from the course video as that only deals with putting a caption on top of an image, not within a container that has paragraph text.

If anyone could help me with this I'd be very grateful!

Thanks,

Rik

p.s. If any of this needs more clarification please let me know