Spacing around custom font added using code block

I am using a custom font for my client's website, and incorporated it into the website using a Code Block. However, I am having issues with a ton of spacing around each code block and I can't figure out how to get rid of it!

It's causing some spacing issues on the desktop site, but especially on mobile - creating huge gaps between the code blocks and other text/image blocks, making it look not so great. See screenshots below (the scripted text is the code block). Desktop is the first image, and mobile is the second.

I've tried a few different codes targeting the padding of the code blocks, but nothing seems to do the trick to fix this issue. Any CSS or HTML suggestions?? Greatly appreciated!!!

Website: https://www.wildlyyoursweddings.com/

@bpurnell Add to Home > Design > Custom CSS

/* Desktop - Tablet */
div#block-yui_3_17_2_1_1566493643251_21265 h4 {
   margin-block-start: 30px;
   margin-block-end: 30px;
}
/* Mobile */
div#block-277c921a68d8ff4264e7 h4 {
   margin-block-start: 20px !important;
   margin-block-end: 20px !important;
}

@tuanphan THANK YOU! Worked brilliantly - you rock!