在移动端的时候右边有多出来的空间,想要隐藏并且可以保持盒子能通过手指左右移动

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<style>
	/*隐藏水平滚动条*/
    ::-webkit-scrollbar {width: 0px;}
	::-webkit-scrollbar {display: none;}
	
	/*chisiamo_style*/
	.chisiamo_son{float: left; width:320px; height: auto; margin:0 25px 0 0; overflow:hidden; display: inline-block; vertical-align:top; position: relative;white-space:nowrap;text-align: center}
	.chisiamo_father{height: auto;width: auto;display: inline-flex; white-space:nowrap;position: relative;overflow:hidden;}
	.chisiamo_img{width:100%; display:block; height: auto}	
	.chisiamo_son p{white-space:normal;font-size: 14px}
	.chisiamo_son h1{margin-top: -10px;font-size: 22px;}
	
	p{text-align: center};


/*手机端缩小div尺寸*/
	@media only screen and (min-width: 320px) and (max-width: 767px){} 
	
	@media (min-width: 1171px){
		.chisiamo_father{left: -50%}
		.outer-container{float: left; position: relative; left: 50%; clear: both;}
	}
	
	@media (max-width: 1170px){
		.chisiamo_father{padding: 0 80px} 
		.outer-container{width: 100%;}
		.listcarousel__nav{margin:35px 80px}
		.listcarousel__nav__next:before, .listcarousel__nav__prev:before
			{content: "";display: block;width: 12px;height: 12px;
			border-style: solid;border-color:#000;
			position: absolute;left: 50%;top: 50%;
			transform: rotate(-45deg)}
		.listcarousel__nav__next:before{border-width: 0 1px 1px 0;margin: -6px 0 0 -10px}
		.listcarousel__nav__prev:before{border-width: 1px 0 0 1px;margin: -6px 0 0 -4px}
		.listcarousel__nav__next, .listcarousel__nav__prev
			{position: relative;display: block;width: 44px;height: 44px;border: 1px solid #bfbfbf;
			float: left;opacity: 1!important}
		.listcarousel__nav{position: relative;max-width: 1010px;}
		.listcarousel__nav__next{margin-left: -1px}
	}
	
	@media (max-width: 1023px){.chisiamo_father{padding: 0 40px} .listcarousel__nav{margin:25px 40px}}
	
	@media (max-width: 767px){
		.chisiamo_father{padding: 0 60px} 
		.listcarousel__nav{margin:15px 60px}
		.chisiamo_son{width: 180px !important;margin-right: 10px;}
		.chisiamo_son h1{font-size: 20px !important;white-space: normal}
		}
	
/* basic fadein */
@keyframes fade-in {  
    0% {opacity: 0;}/*初始状态 透明度为0*/  
    40% {opacity: 0;}/*过渡状态 透明度为0*/  
    100% {opacity: 1;}/*结束状态 透明度为1*/  
}  
@-webkit-keyframes fade-in {/*针对webkit内核*/  
    0% {opacity: 0;}  
    40% {opacity: 0;}  
    100% {opacity: 1;}  
}  
#inner-container {    
    animation: fade-in;/*动画名称*/  
    animation-duration: 1s;/*动画持续时间*/  
    -webkit-animation:fade-in 1s;/*针对webkit内核*/  
}  
	
	
	
	</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#nav_prev").click(function(){
    $("#inner-container").animate({
      left:'+=190px',
    });
  });
});
$(document).ready(function(){
  $("#nav_next").click(function(){
    $("#inner-container").animate({
      left:'-=190px',
    });
  });
});
</script>

</head>

<body>
<div><p>RISTORANTE SUSHI A Manerbio</p></div>

<div class="outer-container">
<div class="chisiamo_father" id="inner-container">
	<div id="chisiamo_1" class="chisiamo_son">
	<img src="image/text_0005_图层 1.jpg" alt="" class="chisiamo_img">
	<h1>Chi Siamo</h1>
	<p>Yami Restaurant propone i piatti più saporiti di sushi cucinati con raffinatezza ed estro creativo. Lo chef parte dalla tradizione per modellare con tocco personale le preparazioni, creando così sapori nuovi.</p></div>
	
	<div id="chisiamo_2" class="chisiamo_son">
	<img src="image/text_0004_图层 2.jpg" alt="" class="chisiamo_img">
	<h1>Il Nostro Menù</h1>
	<p>Sul menu non manca nessuno dei tipi di sushi tradizionali come uramaki, gunkan, così come i rinomati carpacci crudi, riso con anguilla e i succulenti piatti Teppanyiaki.</p></div>
	
	<div id="chisiamo_3" class="chisiamo_son">
	<img src="image/text_0003_图层 3.jpg" alt="" class="chisiamo_img">
	<h1>Ottimo servizi</h1>
	<p>Ci distinguiamo per freschezza e qualità delle materie prime utilizzate, per il servizio meticoloso e veloce, per la cura del cliente e la soddisfazione di ogni sua necessità, per l'accoglienza e il ristorante con un design moderno, curato nei minimi dettagli.</p></div>
	
	<div id="chisiamo_4" class="chisiamo_son">
	<img src="image/text_0002_图层 4.jpg" alt="" class="chisiamo_img">
	<h1>Ampia lista di vini</h1>
	<p>Abbiamo selezionato una lista di vini di assoluta qualità, che vi consentirà di abbinare ogni piatto al vino più adatto per sapore e gradazione. </p></div>
	
</div>
</div>

<div class="listcarousel__nav">
	<span class="listcarousel__nav__prev" id="nav_prev"></span>
	<span class="listcarousel__nav__next" id="nav_next"></span>
</div>

</body>
</html>
把内容按照固定宽度写死，长了设置overflow:scroll ，就可以滑了