Estou desenvolvendo uma aplicação web e gostaria que o meu carrossel com as imagens ocupasse toda a largura da pagina e ficasse colada no menu mas a um espaço entre o o menu e o carousel,e o carousel não ocupa toda pagina.
Olha como esta a minha pagina
HTML
<section id="slider"><!--slider-->
<div class="conteudo_carousel">
<div class="row">
<div class="col-sm-12">
<div id="slider-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider-carousel" data-slide-to="0" class="active"></li>
<li data-target="#slider-carousel" data-slide-to="1"></li>
<li data-target="#slider-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="imagens/fullimage1.jpg" alt="The Last of us" class="girl img-responsive" style="width:1700px;"/>
</div>
<div class="item">
<img src="imagens/fullimage1.jpg" alt="The Last of us" class="girl img-responsive" style="width:1700px;" />
</div>
<div class="item">
<img src="imagens/fullimage1.jpg" alt="The Last of us" class="girl img-responsive" style="width:1700px;"/>
</div>
</div>
<a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
<i class="fa fa-angle-right"></i>
</a>
<a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
<i class="fa fa-angle-left"></i>
</a>
</div>
</div>
</div>
</div>
</section><!--/slider-->
CSS
#slider {
padding-bottom: 45px;
}
.carousel-indicators li {
background: #C4C4BE;
}
.carousel-indicators li.active {
background: #FE980F;
}
.girl {
margin-left: 0;
}
.get {
background: #FE980F;
border: 0 none;
border-radius: 0;
color: #FFFFFF;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
margin-top: 23px;
}
.control-carousel {
position: absolute;
top: 50%;
font-size: 60px;
color: #C2C2C1;
}
.control-carousel:hover{
color: #FE980F ;
}