Mailchimp Embedded form – customisation

Hi,

I have embedded the Mailchimp ‘slim’ form in the footer of my website and am trying to customise it slightly.

Whenever I try to change the width etc of the input form fields the effect is on the whole container. The width of the whole container stretches so that it overlaps on to the right hand side past the actual footer and this is more noticeable as the screen size gets smaller.

I want to achieve:
a. making the email address input field slightly bigger in width
b. moving the email address input field down so that it is inline with the search bar on the left of the footer
c. centering the ‘subscribe’ button (in relation to the field)

This is a link to the CSS selectors –
https://kb.mailchimp.com/lists/signup-forms/css-hooks-for-customizing-forms

Since you have to put the #mc_embed_signup selector with any other selectors to ensure that the style applies it has an effect on everything.

Any idea how I can achieve the above without having the footer overflow to the right?

The page I need help with: [log in to see the link]