Floating image needs to be full width

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

Password: studio@raheracreative

Hello, Im still in the process of designing this webpage, but I want a image to scroll pass at full width. I tried to use a modified version of this code: https://codepen.io/heymagruder/pen/pbKgGj , on the home page top banner. The image however isn't showing as full width. I want the clouds to float by with no edges showing.
I have used my own cloud image https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png 

This is the code I used in a code block on the home page:

<div id="back">
	<div class="cloud"></div>
</div>

<style>
#back {
background: no-repeat center center fixed;
height: 50vh;
}

.cloud {
  background-image: url('https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png'); 
  background-position: 0px 0px;
	background-repeat: repeat-x;
  height: 100%;
  opacity: 0.8;
}

@keyframes cloud {
   100% { background-position: -1900px; }
}

.cloud {
animation: cloud 100s linear infinite;
}
</style>

And this is the code I used in the custom CSS

// Home page - Cloud Image Size //
div#block-yui_3_17_2_1_1627264387252_6900 {
   padding-left: 0;
   padding-right: 0;
   max-width: 100%;
}

sorry if its butchered - still learning. 

I tried this and it helped a little, but the clouds are still at the bottom of the banner and I would like the to go over the center of top. 

// Home page - Cloud Image Size //
div#block-yui_3_17_2_1_1627264387252_6900 {
   width: 90vw;
   position: relative;
   left: -350px; /*changed depending on padding*/
   padding-left: 0 !important;
   padding-right: 0 !important;
}

the image url doesn't exist. Can you check it again?

https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png

https://static1.squarespace.com/static/60fe0b14cd76e61f9a397ca8/t/60fe150d9ea4691d98fa166b/1627264274340/Rahera+Creative+Banners_clouds.png

I can see the link doesn't look like it works. I loaded the image onto my sight as an attachment then copy the link. It seems to work inside the sight. But to save hassel im happy to use this one instead

https://pics.clipartpng.com/Big_White_Cloud_PNG_Clipart-865.png

I think I've solved this. I placed this code it custom CSS:

// Home page - Cloud Image Size //
div#block-yui_3_17_2_1_1627525067464_3370 {
   width: 104vw;
   position: relative;
   left: -650px; /*changed depending on padding*/
   padding-left: 0 !important;
   padding-right: 0 !important;
}
#back {
background: no-repeat center center fixed;
height: 80vh;
}

div#block-yui_3_17_2_1_1627525067464_3370 {
  background-image: url('https://envisionimages.co.uk/wp-content/uploads/2019/03/clouds-png-hd-images-hd-wallpapers-cloud-free-no-onsite-technicians-no-servers-no-computers-at-the-best-price-3543.png'); 
  background-position: 0px 0px;
	background-repeat: repeat-x;
  height: 100%;
  opacity: 0.8;
}

@keyframes cloud {
   100% { background-position: -1900px; }
}

div#block-yui_3_17_2_1_1627525067464_3370 {
animation: cloud 100s linear infinite;
}

Thanks @tuanphan, I'm still designing the website - and havent got to those pages yet 🙂