Wrapping Issue

[AndreaTX]

My header has a large logo on the right side, and 1 each line of three and two word h1 and h2, respectively, on the left side. When I reduce my browser window, my h1 line breaks, pushing the longer words under the logo - see screenshot
I tried adding white-space: nowrap to the division that holds h1 and h1 and I also tried adding the nowrap to each h individually, but both ways cause my text run over the logo instead of moving under it.

<div class="page-header">
<img src="graphics/thunderSeriesLogo.png" alt="Thunder Series Logo">
<div class="headerText">
	<h1>Peter J. Publicinsky</h1>
	<h2>12 Something</h2>
	</div> <!-- closing headerText -->
</div> <!-- page-header -->

.page-header img {
	float: right;
	margin-top: -35px;
	}
.headerText {
	color: #3788F8;
	font-size: 200%;
	font-family:'Inknut Antiqua', serif;
	text-shadow: 4px 4px 4px #3D3D40;
	margin-left: 10%;
	padding-top: 2%;
}
.headerText h1, .headerText h2 {
	white-space: nowrap;
}

I'd appreciate any help.

[Rick]

I'd start by making the image responsive "<img class="img-responsive" src...." so that the image size scales down when resizing small screen widths. That may help. FYI I have several sites that are responsive and in some cases I have to have two internal divisions that are shown or are hidden depending upon screen size. With these I use the bootstrap visible or hidden classes.

[AndreaTX]

Thanks - I tried what you suggested, but it's not working.
http://goo.gl/61Tlxz
I'll try adding some grid detail tomorrow.