Sure I’m happy to help. If you want to make the vertical gradient full width, the simplest approach might be to allow the max-width of the #page element to be full, and the max-width on the child #content element to be 1200px and centred using the following CSS:
But regarding the clouds, where exactly do you want to place them? If you want them on either side of the #content element, I could recommend a solution using CSS grid and ::before and ::after pseudo elements.
If you want them running along the top, in between the header and main content, you could set some padding-top on the #content element and then apply the clouds as a background-image (with repeat-x).