bxsliderというスライドショーがスマホでうまく真ん中で表示できない

スマホ（自分が使っているのはiPhone 6s Plus）サイト用で以下のソースでスライドショーを作りましたが、

PCだと画面一杯で中央にスライドショーの画像が表示されるのですが、スマホで表示させると

スライドショーの画像が左によってしまいます。

Xcodeのシミュレーターで表示させても同じ結果でした。

原因を教えて頂けると幸いです。自分で解決もしてみたいのでヒントでも構いません。

PCはChrome、スマホはSafariで閲覧しています。

[HTML]

<!DOCTYPE HTML>
<html class="fsvs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/top_style.css">
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
            $('.bxslider').bxSlider({
                auto: true,
            });
        });
</script>
<title>talent design. - テストテストテストテストテストテストテストテスト -</title>
</head>

<body>
<header>
  <h1><a href="index.html"></a></h1>
  <p class="header_p1">テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>
</header>
<nav>
  <div id="ham-menu">
    <ul>
    <li class="menu_01"><a href="index.html">トップページ</a></li>
      <li class="menu_02"><a href="page1.html">ページ1</a></li>
      <li class="menu_03"><a href="page2.html">ページ2</a> </li>
      <li class="menu_04"> <a href="page3.html">ページ3</a></li>
      <li class="menu_05"><a href="page4.html">ページ4</a></li>
      <li class="menu_06"><a href="page5.html">ページ5</a></li>
      <li class="menu_07"></a><a href="page6.html">ページ6</a></li>
    </ul>
  </div>
  <div id="menu-background"></div>
</nav>

<!-- sildeshow -->
<section id="sildeshow">
<ul class="bxslider">
  <li><img title="PC" alt="" src="img/slider/img1.jpg" width="1125" height="800" /></li>
  <li><img title="SNS" alt="" src="img/slider/img2.jpg" width="1125" height="800" /></li>
  <li><img title="BLOG" alt="" src="img/slider/img3.jpg" width="1125" height="800" /></li>
</ul>
<section> 
  <!-- sildeshow --> 
  
  <!-- min_box -->
  <section id="min_box" class="clearfix"> 
    
    <!-- new_box -->
    <article class="new_box">
      <h2>新着情報</h2>
    </article>
    <!-- new_box --> 
    
    <!-- tw_box -->
    <article class="tw_box">
    <a class="twitter-timeline" href="https://twitter.com/xxxxxxx">Tweets by talent_design1</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> 
    </article>
    <!-- tw_box --> 
    
  </section>
  <!-- min_box --> 
  
  <!-- footer -->
  <footer>
    <p class="footer_p"><small>Copyright (C)TEST all rights reserved.</small></p>
  </footer>
  <!-- footer --> 
  
</section>
</section></body>
</html>

[CSS（トップページ用レイアウト:top_style.css）]

@charset "UTF-8";
/* CSS Document */

* {
	margin:0 auto;
	padding:0;
}

body {
	width:100%;
	color:#333;
}
	
header {
	width:100%;
	margin-top:20px;
	margin-bottom:20px;
}

h1 {
	display:block;
  	width:80px;
  	height:80px;
  	background-image:url("../img/icon.png");
  	background-repeat:no-repeat;
	text-align:center;
}

h1 span {
	display:none;
}

h1 a {
	display:block;
  	width:80px;
  	height:80px;
}

.header_p1 {
	font-weight:bold;
	padding-top:25px;
	text-align:center;
}

a:link {
	color:#333;
	text-decoration:none
}
a:visited {
	color:#333;
	text-decoration:none
}
a:hover {
	color:#333;
	text-decoration:none
}
a:active {
	color:#333;
	text-decoration:none
}

a:hover {
   opacity: 0.5;
}

ul {
	list-style:none;
	line-height:2.5em;
}

/*メニュー部分*/
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    right: -300px; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 300px; /*メニュー横幅①*/
    z-index: 1000;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu::before {
    background-color: #fff; /*ボタン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    content: "≡"; /*メニューアイコン*/
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px;
    line-height: 50px; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px;
}

/*透過背景部分*/
#menu-background {
    background-color: #333; /*黒背景部分背景色*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 100%;
    z-index: -1;
}

/*hover 時の処理*/
#ham-menu:hover {
    transform: translate(-300px); /*メニュー横幅①と合わせる*/
}

#ham-menu:hover + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}


img { max-width:100%; height:auto; vertical-align:bottom; }

footer {
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333;
	padding-top:10px;
	padding-bottom:10px;
}

#min_box {
	width:100%;
}

.new_box {
	width:70%;
	float:left;
	height:100px;
	text-align:center;
}

.new_box h2 {
	padding:0 70px 0 70px;
	background-color:#82c0fb;
}

.tw_box {
	width:30%;
	float:left;
	background-color:#3366FF;
}

footer .footer_p {
	text-align:center;
}


.clearfix {
 *zoom: 1;
}

.clearfix:after {
	content: '';
	display: table;
	clear: both;
}

[CSS（スライドショー用:jquery.bxslider.css）]

.bx-wrapper {
  position: relative;
  margin-bottom: 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
  text-align:center;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  border: 5px solid #fff;
  background: #fff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

#slideshow {
	width: 100%;
}

[JS:jquery.bxslider.min.js]
スライドショー用jQueryは以下のサイトの物を使用しました。
http://bxslider.com/