Nesting elements that shouldn't be nesting?

I’m trying to style the date and title on my main post index, but the <p> element for my date is inside the <h2> element for my title. As far as I can tell, this should not be the case. I’ve got the code written like this:

<p class="date"><?php the_time('d'); ?><span><?php the_time('M'); ?></span></p>
<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

If you check out a the page on my site that I’m working on (https://www.urracacreative.com/blog/), you can see that the bottom border on the h2 extends under the date, but I don’t want it to extend any further to the left than the edge of the title. Does that make sense?

Can anybody tell me what I’m doing wrong? I don’t understand why my <p> is sitting inside my <h2> since both elements are closed and they should not be nested.

Thanks in advance!