html - Bootstrap 3 Jumbotron text floats right on some devices -

html - Bootstrap 3 Jumbotron text floats right on some devices -

coding rookie here. i'm trying center vertically , horizontally text in full-width jumbotron, using bootstrap3. used modern.ie check out site on other devices. works out okay on devices few little devices (iphone6 , samsung3 example) text floats right, hangs little below jumbotron. sense i'm close have no thought why devices bump text right instead of beingness nicely centered.

html

<!-- jumbotron --> <div class="jumbotron"> <div class="container"> <div class="jumbotron-copy"> <h1 style="color: white;">hello friends</h1> <h3 style="color: white;">welcome 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; }

html css twitter-bootstrap text center