Correcting the positioning of a button - HTML

Site URL: https://www.thesoaresprotocol.com/

Hi guys!

So I set up a subscribe button on my homepage (created from a rss feed burner > follow.it). In my editor I was pleased to see that it would line up perfectly with my news blog button on its left.

But when I check from a user standpoint the button box is slightly lower than the left button.

Here is the code:

<style>
      @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700');
      .form-preview {
      display: block;
      margin-top: 30px;
      padding: 40px 50px 40px 50px;
      max-width: 350px;
      min-height: 200px;
      border-radius: 6px;
      box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25);
      }
      .form-preview .preview-heading {
      width: 100%;
      }
      .form-preview .preview-input-field {
      margin-top: 20px;
      width: 100%;
      }
      .form-preview .preview-input-field input {
      width: 100%;
      height: 40px;
      border-radius: 6px;
      border: 2px solid #e9e8e8;
      background-color: #fff;
      outline: none;
      }
      .form-preview .preview-input-field input::placeholder, .form-preview .preview-input-field input {
      opacity: 0.5;
      color: #000;
      font-family: "Montserrat";
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      text-align: center;
      }
      .form-preview .preview-submit-button {
      margin-top: 10px;
      width: 100%;
      }
      .form-preview .preview-submit-button button {
      width: 100%;
      height: 40px;
      border: 0;
      border-radius: 6px;
      line-height: 0px;
      }
      .form-preview .preview-submit-button button:hover {
      cursor: pointer;
      }

      </style><form data-v-1ed4bb5e="" action="https://api.follow.it/subscription-form/Um9aUTI1ajA3UEZRSXN2aitJdU8rWCtWWDVlWHlqUU0wdERBRkJLL3Rnc1lmTWE3WVFndWxFbVErY01WRldDOUYxaVdMY2YwSE5INWo2akQ0NE5lcCtGaVk4MXJXOC93bFJ4Zm5UK2pZRHJFSnVEdkN5cHBHb0lITEI1cXV1dXB8TXFxcmozQ0hLYm0vSkJOUkJ3dWIrQ2E3OCswRnI1emhBYlNvNTVUYVVaaz0=/8" method="post"><div data-v-1ed4bb5e="" class="form-preview" style="background-color: rgb(255, 255, 255); border-style: solid; border-width: 1px; border-color: rgb(204, 204, 204); position: relative;"><div data-v-1ed4bb5e="" class="preview-heading"><h5 data-v-1ed4bb5e="" style="font-family: Montserrat; font-weight: bold; color: rgb(0, 0, 0); font-size: 16px; text-align: center;">Zoya. Subscribe to "News Blog"</h5></div> <div data-v-1ed4bb5e="" class="preview-input-field"><input data-v-1ed4bb5e="" type="email" name="email" placeholder="Enter your email" spellcheck="false"></div> <div data-v-1ed4bb5e="" class="preview-submit-button"><button data-v-1ed4bb5e="" type="submit" style="font-family: Montserrat; font-weight: bold; color: rgb(255, 255, 255); font-size: 16px; text-align: center; background-color: rgb(0, 0, 0);">Subscribe</button></div></div></form>

I would like to simply correct that small gap and have both lined up correctly (the mobile view isn't an issue since everything appears vertically). I looked at code online but still new to coding.

Thank you for your help!

Found it! Messed with the first lines and reduced the margin-top to 0.

Thank you.

On 4/5/2021 at 12:14 PM, A1Protocol said:

.form-preview { display: block; margin-top: 30px;