Bootstrap 3 Jumbotron文本在某些设备上浮动

Question

在这里编码菜鸟。我试图使用Bootstrap3在我的全角度超大屏幕中垂直和水平地放置一些文本。我用modern.ie来检查其他设备上的网站。它在大多数设备上运行正常，但是一些小设备（例如iphone6和Samsung3）文本浮动到右边，有时挂在jumbotron下面一点点。我觉得我很接近，但我不知道为什么有些设备会将文本向右碰撞而不是很好地居中。

HTML

<!-- Jumbotron -->
<div class="jumbotron">
<div class="container">
<div class="jumbotron-copy">
<h1 style="color: white;">Hello Friends</h1>
<h3 style="color: white;">Welcome to our reception page</h3>
</div>   
</div><!--end container-->
</div> 
<!-- End Jumbotron-->

CSS

.jumbotron {
height: 400px;
width: auto;
position: relative;
background-color: #072526;
background-image: url(../images/jumbotron.jpg);
}

.jumbotron-copy {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
text-align: center;
}