How to Make Banner Text Float to the left, but only to a certain degree...? Bedford Template

I have quite the peculiar problem...

First of all I want to say that this is a very important issue for my client, If I can't find a way to do this it is not going to be good.. Its really a simple thing, but I don't know if square space will support it.

They want the text of the banner of the homepage to have a special format and they want it aligned to the left. I've got that part figured out:

// funky rules to make the banner text look right on the homepage
#IDoftheHomepageBanner {
 .desc-wrapper {
   float: left;
   text-align: left;
vertical-align: baseline;
 }

 .desc-wrapper p:nth-of-type(1) {
   font-size: 48px;
   text-transform: none;
   font-weight: bold;
 }

   .desc-wrapper p > strong {
   color: #004a88;
   font-size: 48px;
   font-weight: bold;
   letter-spacing: normal;
 }

 .desc-wrapper p:nth-of-type(4), .desc-wrapper p:nth-of-type(5) {
   text-transform: none;
   color: #004c8a !important;
   letter-spacing: normal;
 }
}

However, this presents a problem that they really don't like... when the page is expanded the text stays all the way off to the left. The image that they have for the homepage banner has a person in the middle/right, they want the text to "not fly off into no man's land" way far out to the left, but to still stay to the left... Kind of hard to explain. Here is the website I am rebuilding, they want it to look just like this banner. As you can see, when you expand the page the text follows, until you hit a certain point. When you hit that point it stays stuck against the banner image, but not all the way to the left of the page. Almost as though there is an invisible vertical border the text is stuck to.

Anything you can tell me sure would help.

I thought maybe somehow if it's possible to have two columns in the banner you could then align the text to the right of the left column.. but even that would present problems. I'm really at quite the impasse.

Thanks in advance.