Form preview is different from the embedded form

Page - http://www.savannahavril.com/photoshoot-inquiry

I was able to get the background image to display after some trouble but I would like it to cover the whole page, not just the middle. I also want the form to display in the middle of the page, I selected centre orientation but it hasn't helped. I'm not sure what to adjust in the code for this. 

Thank you 

This is what I want it to look like:

https://form.jotform.com/72854893063163

My understanding is that you want the form to occupy the whole page.

The form relies on the width of the container where it is embedded. It means that you need to adjust the layout of your webpage.

Please try injecting this CSS code in your website:

.fixed-width {
width: 100% !important;
}

.layout-fixed .layout {
width: 100% !important;
padding: 0 0 0 0 !important;
}

If that doesn't work, I suggest you contact the administrator of the website or the support of the platform you are using.

Hope that helps. Thank you.

It worked! However the form still isn't centred in the middle of the photo/page, how do I fix this? Thanks 

Please inject this custom CSS code inside the form:

.form-all {
margin: 0 auto !important;
}

Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

Let us know if you have any questions. Thank you.