Issues with text wrap, alignment and disappearing text blocks

Site URL: https://www.maryscholten.com/copy

Hello! My text blocks on this page need some help. I got the text in the "My Experience" block to center vertically but am unable to get it to center horizontally now:

Additionally when I change the resolution, the text is not wrapping and is instead being cut off:

When I reach the mobile breakpoint the "My Experience" block disappears instead of stacking

I would like to fix this on all the similar text blocks on this page. 

Thank you!!

I've fixed the first two issues by adding 

width: 20%;

into the appropriate boxes. 

Still trying to figure out the disappearing on mobile issue. 

To center with transform: translate & absolute

You need to set position: relative for parent elements, 

your code will be

div#page-5e79719043a2c54bbc968650>.row:nth-child(4)>.col {
    background: #e88e69;
    border-radius: 5px;
    position: relative;
}
#block-yui_3_17_2_1_1585017241461_3705 {
    background: #e88e69;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Created a pseudo-element to replace the boxes that were disappearing on mobile, in case this helps anyone.

@media screen and (max-width:640px){
  #block-yui_3_17_2_1_1585192574157_21878::before {
 		content: 'My Experience';
     	color: #1B405A;
 		font-size: 24px;
    	border: solid;
    	border-color: #E88E69;
    	background-color: #E88E69;
    	border-radius: 5px;
    	padding-left: 5px;
    	padding-right: 5px;
  		font-family: modestolite;
 		position: absolute;
  		left: 0px;
  		transform: translateY(-147%);
}
  #block-yui_3_17_2_1_1585611604780_98655{
    	margin-bottom: 20px;
  }
}

So it created this tab looking thing titled "My Experience"

This ticket can be closed!