Newsletter Stacked Field Forms are Off-Center

Hi all! The stacked fields for my newsletter block are not centered. Does anyone know how I can fix this? 

Your help would be much appreciated!!

Here's the custom CSS I'm currently using to customize the appearance:

// Email newsletter section
.newsletter-block {

  header {
    .newsletter-form-header-title { 
      // Styling the form title
      font-family: "DeliciousBold", sans-serif; //Main font family
      font-size: 2rem !important;
      color: #59570F !important;
      letter-spacing: -1.1px !important;
    }
      

    .newsletter-form-header-description {
      p { 
       // Styling the newsletter main text
        font-family: "DeliciousBold", sans-serif;
        font-size: 1.4rem !important; // Size can be in px
        font-weight: 400;
        line-height: 1.2em;
        color: #59570F !important;
      }
    }
  }

  .newsletter-form-body {
    input.newsletter-form-field-element {
      // Styling the form input fields
      // including the "email" field
      min-width: 200px;
      font-family: "DeliciousBold", sans-serif;
      color: #59570F !important;
      padding: .8rem !important;
      font-size: 1.3rem !important;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 0px;
      border-radius: 10px;
      text-align: center;
    }
    }

  // This hides the container for the form disclaimer
  // this part needs to be removed if you display
  // the disclaimer on your website
  .newsletter-form-footnote {
    display: none;
  }
  
    .newsletter-form-header-description {
      display: none;
  }

  // Styling the newsletter block button
  .newsletter-form-button-wrapper {
    
    .newsletter-form-button { 
      // Styling the button text and appearance
      min-width: 200px;
      font-family: "DeliciousBold", sans-serif  !important;
      text-align: center;
      padding: 1.5rem 4rem !important; // This controls how big the button is
      color: #FFF4E1 !important; // Button text color
      background-color: #59570F  !important; // Button background
      text-transform: uppercase !important;
      border-radius: 10px;

      .newsletter-form-button-label {
        font-size: 1.7rem !important;
        font-weight: 600;
        letter-spacing: 0px;
      }
    }
  }
}

Update: It stopped appearing this way on desktop for some reason (I didn't change anything), but it's still showing up off-center on mobile. Thanks!

Can you share link to page where you use form? We can check easier

Just in case it helps someone, this is what worked for me:

#block-ID-here {

.newsletter-form-name-fieldset {
     width: 100% !important;
    max-width: 18rem !important;
    margin: auto !important;
  }
  
.newsletter-form-field-wrapper {
    width: 100% !important;
    max-width: 18rem !important;
    margin: auto !important;
  }

}