我在将浏览器大小调整为796px或更低时获得水平滚动条我试图逐个删除这些部分以找出哪个部分给出了该问题但是它没有解决它然后我试图从部分产品-4开始删除一些代码到代码的末尾并且它已经解决了然后我开始从产品-4到结束逐个删除这些部分但是没有帮助我不知道它们之间的联系是什么，以使滚动显示出来，当尝试使用谷歌浏览器设备工具栏进行测试时，它会在右侧显示移动屏幕分辨率的空白区域，所以我试过了删除任何css代码与products-4或其下任何其他部分的大小有任何关系，但没有任何反应，所以我希望你们能帮助我找到问题所在
/* Products-4 */
#products-4{
background-color: #000;
margin-top:20px;
color:darkred;
}
#products-4 img{
border:1px solid white;
border-radius:10px;
padding:5px;
}
.col-centered{
float: none;
margin: 0 auto;
}
#products-4 h2 {
text-align:center;
}
#products-4 p{
text-align:center;
}
/* Team */
#team h2{
text-align:center;
}
#team{
text-align:center;
}
#team img{
border:1px solid black;
}
/* Contact */
#contact{
background-color: #000;
}
#contact .container{
height:500px;
}
.tab-content{
padding:50px;
border:1px solid white;
}
.tab-content .tab-content-inside{
padding:50px 0;
}
.tab-content .tab-content-inside a{
color:white;
text-decoration: none;
}
.tab-content .tab-content-inside .btn{
margin-top:30px;
}
.tab-content .tab-content-inside .btn-info{
margin-left:50px;
}
.tab-content .tab-content-inside .btn-info a{
padding-right:10px;
padding-left:10px;
}
.nav-tabs li a{
background-color: transparent !important;
color:red;
}
.nav-tabs .active a{
color:white !important;
}
.nav-tabs .active a:hover{
color:cornflowerblue !important;
}
.nav-tabs li a:hover{
background-color:white !important ;
color:cornflowerblue;
transition : all 1s;
-webkit-transition : all 1s;
-moz-transition : all 1s;
-o-transition : all 1s;
} <!-- Strart of products-4 -->
<section id="products-4">
<div class="container">
<div class="row">
<h1 class="text-center">More Products</h1>
<div class="row">
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
<div class="col-md-3">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-centered">
<img class="img-responsive center-block" src="img/polo-pro2.png">
<h2>Polo Shirts</h2>
<p>And Of Course Paragraph here</p>
</div>
</div>
</div>
</section>
<!-- End of Products-4-->
<!--Start of Team -->
<section id="team">
<div class="container">
<div class="row">
<h1>Our Team</h1>
<div class="col-md-4 col-md-offset-2">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Manager</h2>
<p>Any pragraph here</p>
</div>
<div class="col-md-4">
<img src="img/face.png" class="img-circle" alt="">
<h2>The Sales Man</h2>
<p>Any pragraph here</p>
</div>
</div>
</div>
</section>
<!-- End Of Team -->
<!-- Start of contact -->
<section id="contact">
<div class="container">
<div class="row">
<h1>Contact Us</h1>
<div class="row">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#e-mails">E-mails</a>
</li>
<li>
<a data-toggle="tab" href="#phones">Phones</a>
</li>
<li>
<a data-toggle="tab" href="#address">Address</a>
</li>
<li>
<a data-toggle="tab" href="#social">Social Networks</a>
</li>
</ul>
<div class="tab-content">
<div id="e-mails" class="tab-pane fade in active">
<div class="tab-content-inside text-center">
<h1>Feel Free To Text Us Any Time Using This E-Mails</h1>
<div class="tab-content-content">
<button type="button" class="btn btn-primary">
<span class="fa fa-envelope-o fa-2x">
<a href="mailto:m.shawky@rt-wm.com">Manager</a>
</span>
</button>
<button type="button" class="btn btn-info">
<span class="fa fa-envelope-o fa-2x">
<a href="mailto:m.shawky@rt-wm.com">Sales</a>
</span>
</button>
</div>
</div>
</div>
<div id="phones" class="tab-pane fade">
All Phones Goes here
</div>
<div id="address" class="tab-pane fade">
Address Comes here
</div>
<div id="social" class="tab-pane fade">
Social Addresses goes here
</div>
</div>
</div>
</div>
</div>
</section>
<!--end of contact-->