Embedded script (code box) size

Hi everyone! I'm running into this problem for awhile now that whenever I add an html code to my page using the code block Squarespace adds this "Embedded script" box around the thing being embedded and it occupies an unnecessary space on the page. It makes the spacing between other blocks in between the code all weird and I can't seem to fix it. 

Screenshot 1: What it looks in the backend (I can't adjust the spacing of the code block as it doesn't allow me to)

Screenshot 2: What it looks like when the page is live (I don't want that spacing between the text boxes)

Here's the URL for the live page: https://thecenterforimplementation.com/equity-event-confirmation

Here's the code I'm trying to use (but this keeps happening with any HTML code I use): 

<link rel="stylesheet" href="https://cdn.addevent.com/libs/atc/themes/fff-theme-1/theme.css" type="text/css" media="all" /><script type="text/javascript" src="https://cdn.addevent.com/libs/atc/1.6.1/atc.min.js"></script><div title="Add to Calendar" class="addeventatc" data-styling="none" data-id="lw18366030"> Add to Calendar <span class="addeventatc_icon"></span></div><style>.addeventatc {background-color:#0066b2!important;color:#ffffff!important;}.addeventatc:hover {background-color:#0066b2!important;filter:brightness(105%);}.addeventatc:active {background-color:#0066b2!important;filter:brightness(110%);}.addeventatc .addeventatc_icon {background:url(https://cdn.addevent.com/libs/imgs/icon-calendar-fff-t1.svg) no-repeat!important;}</style>

Note: If I overlap blocks (text and code), it doesn't work as it just looks overlapped when it's live.

Does anyone know how to fix this? 

Very much appreciated!

@Ziggy You're so fast! Thank you so much, it worked perfectly. 

Just now, tci_ca said:

@Ziggy You're so fast! Thank you so much, it worked perfectly. 

Haha it's a solution I use and share fairly regularly since we got the new Fluid Engine editor.