@font-face {
font-family: "champagne&limousines";
src: url('../fonts/Guava/Champagne & Limousines.ttf') format('truetype');
font-family: "champagne&limousines-bold";
src: url('../fonts/Guava/Champagne & Limousines Bold.ttf') format('truetype');
}
body {
padding-top: 50px;
padding-bottom: 20px;
font: 14px "champagne&limousines", sans-serif;
text-align: justify;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 0px;
padding-right: 0px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/*revisar logo*/
a.navbar-brand {
background-color: rgba(255, 255, 255, 0.7);
background: url(../img/logo/logotrans.png) no-repeat top left;
display: block;
width: 114px;
height: 64px;
margin: 20px 20px;
margin-right: 40px;
text-indent: -9999px; /* hides the link text */
}
.navbar-inverse .navbar-nav > li > a
{
color: rgba(255, 255, 255, 0.7);
}
a.menu-lindo {
font: 26px "champagne&limousines-bold", sans-serif;
margin-top: 25px;
margin-right: 10px;
line-height: 25px;
}
a.menu-lindo:hover, a.menu-lindo:focus {
font: 26px "champagne&limousines-bold", sans-serif;
padding: 10px 15px;
}
.navbar {
background-color: rgba(211,47,47, 0.9);
border-color: rgba(211,47,47, 0.9);
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
border-top-color: #fff;
border-right-color: #fff;
border-bottom-color: #fff;
border-left-color: #fff;
}
.navbar-inverse .navbar-toggle:hover {
background-color: #b71c1c;
}
.navbar-inverse .navbar-toggle:focus {
background-color: #D32F2F;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: rgba(211,47,47, 0.9);
}
.jumbotron {
padding: 15px 30px !important;
}
.well {
margin-top: 80px;
}
a {
color: #D32F2F;
font: 18px "champagne&limousines-bold", sans-serif;
font-size: 18px;
}
a:hover {
color: #b71c1c;
font: 18px "champagne&limousines-bold", sans-serif;
text-decoration: none;
}
a:focus {
color: #D32F2F;
font: 18px "champagne&limousines-bold", sans-serif;
text-decoration: none;
}
h2 .titulo-receta {
margin-top: 170px;
}
.miimagen{
margin-top: 80px;
}
a.btn {
color: #fff;
font: 18px "champagne&limousines-bold", sans-serif;
}
a.btn:hover, a.btn:focus, a.btn:active, a.btn:visited {
color: #fff !important;
font: 18px "champagne&limousines-bold", sans-serif;
}
.backbar {
margin-top: 55px;
background: rgba(118,129,159, 0.7);
}
.backbar .btn {
background: rgba(118,129,159, 0.7);
margin: 10px 10px;
border-color: #fff;
}
.backbar .btn:hover, .backbar .btn:focus {
background: rgba(118,129,159, 1);
}
/*slider*/
.slider {
margin-top: 55px
}
.container .body-content {
margin-left: 0;
margin-right: 0;
box-sizing: content-box;
}
.slider .slider-carousel {
margin-left: 0;
margin-right: 0;
box-sizing: content-box;
}
.caroufredsel_wraper {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.slider, .slider ul.slider-carousel, .slider ul.slider-carousel li {
height: 100%;
width: 100%;
text-align: center;
color: #FFF;
}
.slider ul.slider-carousel li h3 {
margin-top: 150px;
margin-bottom: 30px;
color: #FFF;
}
.slider ul.slider-carousel li p {
margin-bottom: 20px;
}
.img1 {
background: url('../img/slider/1.png');
background-size: 100% 100%;
}
.img2 {
background: url('../img/slider/2.png');
background-size: 100% 100%;
}
.img3 {
background: url('../img/slider/3.png');
background-size: 100% 100%;
}
.slider ul.sliderpager li.selected a {
color: #E74C3C;
}
.slider ul.sliderpager li a {
color: #34495E;
}
.slider ul.sliderpager li {
padding: 0 3px;
height: 28px;
line-height: 28px;
display: inline-block;
}
/*footer */
footer .copyright {
text-align: center;
margin-top: 80px;
}<div class="slider" id="slider">
<ul class="slider-carousel" id="slider-carousel">
<li class="img1">
<h3></h3>
<p></p>
</li>
<li class="img2">
<h3></h3>
<p></p>
</li>
<li class="img3">
<h3></h3>
<p></p>
</li>
</ul>
<ul class="sliderpager">
<li><a href="#"><i class="fa fa-circle"></i></a></li>
<li><a href="#"><i class="fa fa-circle"></i></a></li>
<li><a href="#"><i class="fa fa-circle"></i></a></li>
</ul>
</div>我想消除边距，使滑块图像覆盖页面的整个宽度，但只有滑块部分，其余的都是完美的......
您需要做的是使用通用选择器来删除所有元素的边距和填充，如下所示，除了使边框和填充计入元素的大小之外：
完成此操作后，您可以将边距和填充添加到您想要的任何内容，但两者都应该以 0 为基数。此外，查看您的代码，这将为您节省大量时间和代码行数。我已经看到了您手动从许多元素中删除边距并使用通用选择器不会浪费时间这样做。
这是您的示例，其中包含我所指出的内容：