如何解决div外的旋转木马项目

Question

当我创建Bootstrap carousel时，当我单击prev或next按钮时，这些项就不在div中了。我的CSS全局边距设置为0，当我从CSS中删除边距时，它可以工作。

请帮助我解决保证金为0的问题，因为我需要它。

这是我的问题https://codepen.io/zedblack2000/pen/rNLVYPV的链接

HTML和CSS：

*{
    padding: 0 !important ;
    margin: 0 !important;
    
}

body{
    background-color: red;
}

          <div class="container text-center my-3">

                <div id="recipeCarousel" class="carousel slide w-100" data-interval="false" data-ride="carousel">
                    <div class="carousel-inner w-100" role="listbox">
                        <div class="carousel-item row no-gutters active">
                            <div class="col-2 float-left"><img class="img-fluid" src="share/snapchat.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/facebook.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/viber.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/instagram.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/twitter.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/youtube.png"></div>

                        </div>
                        <div class="carousel-item row no-gutters">

                            <div class="col-2 float-left"><img class="img-fluid" src="share/google-plus.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/pinterest.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/reddit.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/tumblr.png"></div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/skype.png"> </div>
                            <div class="col-2 float-left"><img class="img-fluid" src="share/vimeo.png"> </div>

                        </div>
                    </div>
                    <a class="control-top" href="#recipeCarousel" role="button" data-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="control-top" href="#recipeCarousel" role="button" data-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>

            </div>

​

Answer 1

您必须在容器中放入空白处和填充属性:)

*{
  box-sizing:border-box;   
}
body{
  background-color:red;
}
.container{
  padding: 0 ;
  margin: 0;
}

Answer 2

*{
  padding: 0 ;
  margin: 0;
}

.carousel {
  margin:0 auto;
}

试试这个