Help with Text Block wrap (?)

"text wrap" may not be the correct term, but I am having trouble with some text lines breaking up in un-natural places, depending on browser window size. I need help creating code that will stop this from happening, whatever that looks like.

Public site: http://hilarybeckwith.com

Try adding this to Custom CSS. You may have two tweak the font size properties. The first font size applies to desktop. The second applies to tablets & phones. 

#block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 {
    font-size: 3.5rem !important;
}

@media screen and (max-width:1140px) {
#block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 {
    font-size: 2.5rem !important;
}
}

Actually, I think you can combine the code like so:

//***Homepage Font Sizing***//

#block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 {
    font-size: 3.5rem !important;

	@media screen and (max-width:1140px) {    
	font-size: 2.5rem !important;
	}
}

2 hours ago, ReformDesign said:

Actually, I think you can combine the code like so:

//***Homepage Font Sizing***//

#block-yui_3_17_2_1_1676657096961_9238, #block-11d51f4bc5da4b443af7, #block-b9ab9ab5f2feed324232 h4 {
    font-size: 3.5rem !important;

	@media screen and (max-width:1140px) {    
	font-size: 2.5rem !important;
	}
}

This did not work to resolve the splitting. I recall this happening to other text within my page (although I can't rememebr where, or find the coding in my CSS), and the solution was not to do with "rem". 

Which screen size do you see problem? It looks fine to me

10 hours ago, tuanphan said:

Which screen size do you see problem? It looks fine to me

It just depends on the window size. If the window size is shrunk down, the words split