css - 自举容器流体轮播

我感到很惊讶，我以为使用容器流体会给我一个全宽度的传送带，但事实并非如此。它具有15 px左右的填充，因此我添加了一个新类remove-padding以便没有填充，但是它不起作用。
有没有传送带的旋转木马的想法吗？

$(document).ready(function(){
	$('.slick-carousel').slick({
    arrows:true,
    prevArrow:'<a class="slick-prev"><span class="glyphicon glyphicon-chevron-left"></span></a>',
    nextArrow:'<a class="slick-next"><span class="glyphicon glyphicon-chevron-right"></span></a>'
                             });
});

.slick-prev {
    left: 50px;
}
.slick-next {
    right: 50px;
}
.slick-prev, .slick-next {
    background: none;
    border: medium none;
    color: blue;
    cursor: pointer;
    display: block;
    font-size: 24px;
    height: 20px;
    line-height: 0;
    margin-top: -10px;
    outline: medium none;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 20px;
}
.slick-prev:before {
    content: "";
}
.slick-next:before {
    content: "";
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: #fff; }


.slick-carousel h1{ position:absolute; top:40px; left:20%; color:#fff; }*/
.remove-padding {padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://sandbox.jsnegley.net/jquery/slick-carousel/slick.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-12 pen">
      <div class="page-header">
        <h5>Slick Carousel</h5>
        <h1>Basic Carousel</h1>
        <ul class="technology">
        <li>Bootstrap <span class="label label-default">3.3.4</span></li>
        <li>jQuery <span class="label label-default">2.1.3</span></li>
        <li>
        <a href="https://github.com/kenwheeler/slick"><span class="glyphicon glyphicon-book"></span> Documentation</a>
        </li>
        </ul>
      </div>
    </div>
  </div>
<!-- /container --></div>

<div class="container-fluid remove-padding">

      <!-- START MOD -->
 <div class="slick-carousel">
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-1.jpg" class="img-responsive">
     <h1>Title 1</h1>
   </div>
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-2.jpg"  class="img-responsive">
   <h1>Very long crazy long mega long title</h1>
   </div>
   <div><img src="http://sandbox.jsnegley.net/pics/carousel-3.jpg"  class="img-responsive"><h1>Title Title title</h1></div>
</div>
      <!-- END MOD -->
</div>


 <!-- /container --></div>
<div class="container"><div class="row">
      <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
                <div class="col-xs-4">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis est eget tristique vestibulum. Fusce et pulvinar erat, id viverra sem. Vivamus porttitor, sapien nec mattis fermentum, sem augue ornare erat, vitae interdum ante sapien id libero. Vestibulum luctus augue pretium purus posuere.
                </div>
</div></div>

最佳答案

在“ slick-carousel”类旁边添加“ class”行。

这解决了问题。

一些解释：
.container-fluid除了水平自动边距之外，还在左侧和右侧添加了15px的填充。