Custom code newsletter block in footer

I am using some custom code for the signup button in the footer. For some reason, I can’t get the pink to go all the way to the right and the SUBSCRIBE to be in the center of that pink area. Code below. I can’t find good code anywhere to make this style button!  Site PW: test 

I've attached a screenshot of the design and the current footer. Thanks!

/* Detraform's Minimal Newsletter Block*/

.newsletter-block {
  padding-top: 0 !important;
  .newsletter-form-wrapper {
    background-color: transparent;
    padding: 0 !important;
    .newsletter-form-body {
      flex-direction: row;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -ms-grid-row-align: center;
      align-items:  ;
      display: flex;
      padding-bottom: 0;
      border: 1.5px solid;
      border-color: #ffffff;
      .newsletter-form-fields-wrapper {
        width:  ~"calc(75% - 8px)";
        margin: 0px;
        .newsletter-form-field-wrapper {
          display: block;
          width: 100%;
          padding: 0px;
        }
        input {
          font-family: 'Open Sans Condensed';
          letter-spacing: 0;
          font-size: 14px;
          line-height: 1.4em;
          padding: 15px 20px;
          background-color: transparent;
          @media screen and (max-width: 640px) {
            padding: 15px 15px;
          }
          @media screen and (max-width: 420px) {
            padding: 17px 0 17px 12px;
          }
          display: block;
          border: none;
          &::placeholder{
            font-family: 'Open Sans Condensed';
            font-size: 1.2em;
            line-height: 1.4em;
            letter-spacing: 0;
            color: #ffffff !important; 
          }
        }
        @media screen and (max-width: 1350px) {
          width:  ~"calc(70% - 8px)";
        }
        @media screen and (max-width: 1200px) {
          width:  ~"calc(64%)";
        }
        @media screen and (max-width: 1024px) {
          width:  ~"calc(75%)";
        }
      }
      .newsletter-form-button-wrapper {
        width: 15%;
        height: 100%;
        margin: 0px;
        padding: 0;
        margin-top: 0px;
        vertical-align: middle;
        button {
          background-color: #d92c5a !important;
          border: none !important;
          vertical-align: top;
          box-shadow: none !important;
          padding: 27px;
          width: 100%;
          font-family: 'Open Sans Condensed';
          font-size: 1.2em;
          line-height: 1.5em;
          letter-spacing: 0;
          text-align: left !important;
          span {
            text-align: left !important;
            text-transform: uppercase;
            color: #ffffff !important;
            font-weight: 400;
            &:hover {
              opacity: .7;
            }
          }
          @media screen and (max-width: 1024px) {
            text-align: left;
            padding-left: 0;
            padding-right: 10px;
          }
          @media screen and (max-width: 640px) {
            text-align: left;
            padding-left: 0;
            padding-right: 0;
          }
        }
        @media screen and (max-width: 1350px) {
          text-align: left;
          padding: 0 30px;
          width: 32%;
          .newsletter-form-button {
            padding-right: 0;
          }
        }
        @media screen and (max-width: 1024px) {
          text-align: left;
          padding-top: 0;
          padding-bottom: 0;
          padding-left: 0;
          padding-right: 15px;
        }
        @media screen and (max-width: 640px) {
          padding-right: 0px;
        }
      }
      @media screen and (max-width: 1200px) {
        text-align: right;
        width: 100%;
      }
    }
    .newsletter-form-footnote {
      text-align: left;
      letter-spacing: .0em;
    }
  }
  .newsletter-form-footnote {
    margin-top: 16px;
    p {
      font-family: 'Open Sans Condensed' !important;
      line-height: 1.25em;
      opacity: 1;
      strong {
        font-weight: 400;
        color: #ffffff !important;
      }
    }
  } 
}

Can you share the website URL?

It's https://dala-dev.squarespace.com/. 

Thanks for sharing, I can't obviously see the reason, but with the amount of width constraints at different screen sizes, I'm not surprised something went a bit wrong. Where did you get the code from?

Just a website. I'm not a coder but looking to just make the newsletter look like that. hacking my way through, lol. Do you know code that would do the trick?

Looks like you found it here: https://www.detraform.com/blog/free-squarespace-plugin-minimal-newsletter-block
The way this has been redesigned looks nice, but it doesn't allow for a background color on the button, the border isn't in the right place which is why the button doesn't seem to extend far enough to the right. It would be possible to achieve the look you're after, but probably not with that code.

@Umlaut  You can try this Custom CSS if you remove the other code:

section[data-section-id="6344830c182f827682537afd"] {
  .newsletter-block .newsletter-form-wrapper .newsletter-form-field-wrapper {
    padding-right:0;
  }
  .newsletter-block .newsletter-form-field-element {
    background:none;
    border-top:2px solid white;
    border-bottom:2px solid white;
    border-left:2px solid white;
  }
  ::placeholder {
    color:#fff !important;
  }
  .newsletter-form-button-wrapper {
    margin-left:-6px;
  }
  .newsletter-form-button {
    background:#d92c5a !important;  
    border-top:2px solid white !important;
    border-bottom:2px solid white!important;
    border-right:2px solid white!important;
  }
}

Oh thank you! It's very close. Do you know how I can keep it on one line? 

Try adding this:

.newsletter-block .newsletter-form-wrapper .newsletter-form-body {
  display:flex;
}

The main problem is the block being constrained too much to suit the design.

Gotcha, Thank you very much!

Sorry, two more questions. 

1. How do I change the text to white when they're typing in their email address?

2. Is there any way to make the whole box shorter or is that about the smallest it'll get?

input[name="email"] {
    color: white !important;
}