标题符号在IE中打破

Question

我正在使用此网站：http://sbw.aaugirlsbasketball.org/

客户说他在Windows 10机器上使用的是IE 11标题＆＃34; AAU Girls Basketball＆＃34;在特定分辨率下分成2行。这是在<header id="skin_header">标签上使用IE中的Inspect Element时找到的近似屏幕宽度：

1. 1320px宽：好的
2. 1300px宽：分为两行
3. 1140px宽：好的
4. 1065px宽：打破两行
5. 984px宽：变小但仍然坏了，从这里文字大小改变但是当它再次好时继续破坏直到760px。

以下是截图：

正如您在下面的CSS中看到的那样，我们尝试添加span.head1 { white-space: nowrap; }但我认为它不起作用。我不能让我的IE复制问题，我的开发人员也不能。

HTML：

<div class="headertitle">
    <div class="titlehead">
       <span class="head1">AAU GIRLS BASKETBALL</span>
       <br>
       <span class="head2">THE OFFICAL HOME OF THE AMATER ATHLETIC UNION GIRLS BASKETBALL</span>
     </div>
 </div>

CSS：

.headertitle {
  background-image: url("../images/title_bg.png");
  background-position: 88% 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 98px;
  margin-top: 7px;
  position: absolute;
  right: -40px;
  width: 82%;
  z-index: 1;
}
.titlehead {
  margin-left: 49px;
  margin-top: -10px;
  width: 100%;
 }
span.head1 {
  color: #ffffff;
  font-family: "Roboto",sans-serif;
  font-size: 49px;
  font-weight: 900;
  text-shadow: 3px 5px 7px #070707;
  white-space: nowrap;
}
span.head2 {
  color: #ffffff;
  font-family: "Open Sans",sans-serif;
  font-size: 16px;
}

任何人都可以解决此问题并提供解决方案，以便我的客户端headertitle不会因屏幕变小而分成两行吗？