Code block is breaking my header

https://sealion-mango-xflb.squarespace.com
123

Hey guys, I have just made a code block that allows me to pull out a pop up when clicked to youtube. but when i added the codeblock it broke my header making letters go down from the header. Is there a way to fix it? Also im struggling to center the letters?

<div class="ugb-video-popup" style="
    background: #transparent;"
      data-video='1hsFTxQkZYM'
     data-video='https://www.youtube.com/watch?v=1hsFTxQkZYM'
width=50%
length=50%
       >
	<div class="modal-open-link">
		<a href="#">THE LATEST</a>
	</div>
</div>
<style>
  
.ugb-video-popup {
	position: relative;
	margin: 0 auto;
	width: 300%;
	max-width: 600px;
}
.ugb-video-preview, a, .ugb-play-button {
	position: absolute;
	top: 0;		
	left: 0;
	right: 0;
	bottom: 0;
}
.ugb-video-preview {
	background-size: cover;
	background-position: center;
	opacity: .4;
	transition: all .3s ease-in-out;
	z-index: 1;
	object-fit: fill;
	width: 100%;
}

.ugb-video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 55%;
}
a {
		z-index: 3;
		box-shadow: none !important;
		background: transparent !important;
		display: block !important;
		color: #fff;
		text-decoration: none;
	}
	.ugb-play-button {
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	svg {
		fill: #fff !important;
	}
.modal-open-link {
  font-family: bebas-neue;
  font-size: 150px;
  color: #464646;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: transparent; /* Set background to transparent */
}
#bp_sv > iframe{
width: 70% !important;
height: 70% !important;
position: fixed;
left: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: auto !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bigpicture@1.2.3/dist/BigPicture.min.js"></script>
<script>
domReady( () => {
	const elems = document.querySelectorAll( '.ugb-video-popup' )
	const openVideo = el => {
		if ( BigPicture ) {
			const videoID = el.getAttribute( 'data-video' )
			const args = {
				el,
				noLoader: true,
			}
			if ( videoID.match( /^\d+$/g ) ) {
				args['vimeoSrc'] = videoID
			} else if ( videoID.match( /^https?:\/\//g ) ) {
				args['vidSrc'] = videoID
			} else {
				args['ytSrc'] = videoID
			}
			BigPicture( args )
		}
	}
	elems.forEach( el => {
		const a = el.querySelector( '.modal-open-link' )
		a.addEventListener( 'click', ev => {
			ev.preventDefault()
			openVideo( el )
		} )
		a.addEventListener( 'touchend', ev => {
			ev.preventDefault()
			openVideo( el )
		} )
	} )
} )
function domReady(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
</script>

Change red code

to this code

.ugb-video-popup a {
		z-index: 3;
		box-shadow: none !important;
		background: transparent !important;
		display: block !important;
		color: #fff;
		text-decoration: none;
	}

and change this

to this code

.ugb-video-preview, .ugb-video-popup a, .ugb-play-button {
	position: absolute;
	top: 0;		
	left: 0;
	right: 0;
	bottom: 0;
}

result