Coding Alignment Issues

Site URL: https://www.portcity.church/test

Hey Everyone!

I've been trying to get this to align for sometime, but nothing seems to be working. I'm trying to have the white button line up in the bottom corner and the "We're better Together" text slightly above it (see the attached images) The first is how it currently looks and the second is how I want it to look. Here's what I have going on currently:

<style>
* {
  box-sizing:border-box;
}

.connect {
  background-image:url("https://portcitychurch.box.com/shared/static/poy39t4b79axsdm9j0i1ncn1xw4nwav2.png");
  background-position: center;
  background-size: cover;
  padding:20px;
  border-radius: 25px;
  float:left;
  width:80%;
  height: 400px;
}
  
  
  .connect-button {
  background: #FFFFFF;  
  padding:20px;
  margin-right: 10px;
  border-radius: 25px;
  float:left;
  width:auto;
  position: absolute;
  top: 40%;
}
  
</style>


<div class="connect">
  <h6 style="font-size:3vw; position: absolute; top:26%">We're Better Together</h6>
  <div class="connect-button">
    <h8 style="font-size:1.3vw">Connect</h8>
  </div>
</div>

.connect {
    position: relative;
}
/* text */
.connect-text {
    position: absolute;
    bottom: 30%;
    top: unset;
    z-index: 999;
    left: 20px;
}
/* button */
.connect-button {
    top: unset;
    left: unset;
    position: absolute !important;
    bottom: 0;
}

Hi @tuanphan

I'm having issues with button alignment on the home page under the section "How I Can Help You." I'd love for the buttons to be aligned even though the text is not the same length. I'm currently using spaces but when it's on mobile, it looks off as well. I was wondering if you could help me out with this? Really appreciate it - thanks!

website: www.energcoach.com

pw: energ