Discrepant appearance of text block on Internet Explorer vs other browsers

Site URL: https://www.palliumcare.com/home

Hi,

I have a text block on my home page which appears almost completely off the site on internet explorer vs other browsers. What gives? I've attached a photo. 

I have changed it around quite a bit with the custom css editor. Perhaps I've altered something, i'm still learning here. 

#block-yui_3_17_2_1_1587648289000_15963
{
background-color:rgba(0,113,188,0.7);
      padding: 0px;
  padding-bottom: 60px!important;
  padding-top: 35px!important;
  width: 40%;
     margin-right: auto;
    margin-left: auto;
  position: absolute;
  bottom: -80px;
  overflow: visible;
  z-index: 100;
  animation-duration: 3s;
  text-align:center;
}

You mean header overlap text box?

If you see it on another browser, it makes more sense. But all of the text isn't visible here and is cut off at the top. I'm not really sure why it looks like this on IE vs chrome. 

Ignore, I figured out it was a problem with the  position: absolute code.