Button wrong Size on Mobile

Can anybody tell me why my 'Donate' button on my nav bar is extending out to the left when on mobile, but on regular screen it is perfect? In addition, the font padding off as well.

https://dev.fmba70.org

.style1 {
    text-align: left
}
.style2 {
    float: left
}
.style3 {
    float: left
}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.style4 {
    background-color: #adb5bd
}
.style5 {
    background-color: rgba(108, 117, 125, 0.26)
}
.style6 {
    background-color: #adb5bd
}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.wappler-temp {}
.style7 {
    color: #fff
}
.style8 {
    font-family: Arial, Helvetica, sans-serif
}
.style9 {
    font-family: Arial, Helvetica, sans-serif
}

#donate_navBar {
    background-color: #041c42;
  border: none;color: white;
  text-align: center;
  text-decoration: none;display: inline-block;
  font-size: 16px;
}
#alert1 {
    height: 50px;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
            
}

This is due to how the nav links are styled for mobile in Bootstrap. If i understand correctly what you're trying to achieve, add the following classes to the donate button:

align-self-end px-2

And also remove this id from here:

as it breaks your navbar button. It should not be there, this same id is already used for the navbar collapse element.