Issue with Social Links Overlapping Newsletter Block - Custom CSS Help

Site URL: https://www.anqi-wu.com/

Hello! For some reason I am having issues with figuring out how to fix this layout problem on my webpage.

The newsletter block and my social links are overlapping on top of each other. Is there some sort of custom CSS code I can input to fix it? As well, an additional small minor issues if anyone knows how to fix, the spacing within my newsletter block is a bit off. I'd like for there to be less space between the text and the email input box if that is something that can be adjusted?

The current template I am using for my webpage is Wells. I also currently have some custom CSS already to make some small esthetic tweaks to my newsletter and buttons which I'd like to keep, but just don't know how to fix the overlapping part.

The current custom CSS code I have is :
_______________
.newsletter-block .newsletter-form-header-title {
 font-size: 18px
}
.newsletter-block .newsletter-form-wrapper {
 padding: 23px 23px;
  border-radius: 42px;
}
.newsletter-block input {
 height: 3.4em;
 max-width: 20em;
 display: block;
}
.newsletter-block .newsletter-form-wrapper {
  height: 270px
}

.newsletter-block .newsletter-form-button {
 padding: 7px; text-transform: none; font-size: 0.9em;
  border-radius: 700px;
}

.sps-block-button .sps-block-button-element—medium {
  background-color: pink;
  border-radius: 50px;
  border: 2px pill;
  width:75%;
}
_______________

If anyone can happen to help that would be greatly appreciated. I've included a screenshot of how it currently looks with notes. The password for the website is tattoo2020 if anyone wants to take a look on the website.

Thank you!

Hi. Do you still need help on this?

Hello! Thanks for your response!

Yes I would still like help on this.

Thanks,

-Anqi

3 hours ago, MissChi said:

Hello! Thanks for your response!

Yes I would still like help on this.

Thanks,

-Anqi

Add to Home > Design > Custom CSS

.newsletter-form-header-description p {
    margin-bottom: 5px !important;
}
.newsletter-form-fields-wrapper.form-fields {
    margin-top: 0;
}
div#footerBlocks-2 {
    margin-top: 50px;
}

19 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

.newsletter-form-header-description p {
    margin-bottom: 5px !important;
}
.newsletter-form-fields-wrapper.form-fields {
    margin-top: 0;
}
div#footerBlocks-2 {
    margin-top: 50px;
}

 

Thanks so much!