Issues with Padding and Margin in Newsletter Form Block

Hi there,

My website: www.eyzhn.co

In my footer section (on all pages):

(1) I would like to make the footer newsletter form button the same height as the form field elements. When "inspecting" my page I am able to do that by adjusting the padding from 1.2rem to 1rem. However when I add this code to CSS nothing happens.

.newsletter-form-button {
    width: 100% !important;
    padding: 1rem !important;
    margin: 0px !important;
}

(2) I would like to fix the margin above and below the "subscribe" and descriptive text so that it aligns with the lists next to it on the left. Here is my custom footer code for reference.

/* Hover and active link colour */
footer a {text-decoration: none !important;}
section[data-section-id="63384be20590b6496ef20a8a"] a:hover * {color: #6c988d !important;}#block-yui_3_17_2_1_1668132221218_478394 * {padding: 10;}

/* Center lists on mobile */
@media screen and (max-width: 640px) {footer p { text-align: center;}}

/* Center newsletter title on mobile */
@media screen and (max-width: 640px) {#block-yui_3_17_2_1_1668132221218_478394 * {text-align: center;}}

/* Newsletter form input fields */ 
.newsletter-form-body {input.newsletter-form-field-element {padding: .8rem !important;  border-radius: 200px; text-align: center;}}

/* Newsletter field & button width */
.newsletter-form-fields-wrapper.form-fields {width: 100% !important; display: block !important;}
.newsletter-form-fields-wrapper.form-fields>* {max-width: 100% !important;}
.newsletter-form-field-wrapper {width: 100% !important; max-width: 100% !important;}
.newsletter-form-button {width: 100% !important; padding: 1rem !important; margin: 0px !important;}

/* Newsletter margins */

.newsletter-form-body>div {margin-top: 0 !important;}

.newsletter-form-footnote {display: none;}

Thanks!

Try this for the button padding:

.newsletter-block .newsletter-form-button {
  padding:1em 2.25em;
}

Adjust this to try and align the newsletter top text (though replacing that with a text block and removing the title and description in CSS would be easier to keep it correct)

.newsletter-block .newsletter-form-header-title {
  margin-bottom:0rem;
}

Hope that helps