Header Code Injection Adding Extra Padding

Site URL: https://theaboutherpodcast.squarespace.com/

Hi there! 

When I add a simple <div> tag to my header code, I'm getting some extra padding added to all my pages. When I remove the code, the padding is not there. It only happens in the first container/section on the page. Any thoughts? Here's my code I injected in the header:

<div class="logo-title-container">
  <div class="logo-title">
 <a href="/home"><h1>
   Abigail O’Neel
</h1>
<h4>
  <em>ministry wife, podcast host, &amp; bible teacher</em>
   </h4></a>
  </div>
    </div>

Here's a screenshot.

Since the site is already live, I've put some custom CSS on every page to temporarily fix the issue, but I'd like to try to figure out a universal fix.

Your code is invalid. Try this new code

<div class="logo-title-container">
  <div class="logo-title">
    <h1><a href="/home">Abigail O’Neel</a></h1>
    <h4><em>ministry wife, podcast host, &amp; bible teacher</em></h4>
  </div>
</div>