@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>I want to eliminate the margins so that the slider images cover the entire width of the page, but only the slider part, the rest is perfect...
What you have to do is use the universal selector to remove the margin and padding on all elements as follows, in addition to making the border and padding count towards the size of the elements:
Once this is done, you add the margin and the padding to whatever you want, but both should be 0 as a base. Also, looking at your code, this will save you a lot of time and lines of code. I have seen that you manually remove the margin from many elements and using the universal selector you won't waste time doing that.
Here is your example with what I have indicated: