Bootstrap add white space to sides of carousel - html

Question

I'm trying to get get some padding to sides of Twitter Bootstrap slider.
I'm using plain example codes from bootstrap sides with little modifications.
In bellow image you can see what I try to mean. Slider is right now 100% of page width , but I try get some darker are to show on sides (60% of page width.) So it should be left 20% middle 60% and right side 20%.
HTML:
<header id="karuselli" class="carousel slide row" >
<ol class="carousel-indicators">
<li data-target="#karuselli" data-slide-to="0" class="active"></li>
<li data-target="#karuselli" data-slide-to="1"></li>
<li data-target="#karuselli" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<a class="left carousel-control" href="#karuselli" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#karuselli" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
SCSS:
$karusellikorkeus : 50%;
$paneelikorkeus : 25px;
$menuValikkoYksi : 50%;
.menuValikkoYksi {
margin-right: 20%;
}
html,
body {
height: 100%;
background-color: #8c8c8c;
}
.carousel {
height: $karusellikorkeus;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
.item,
.active,
.carousel-inner {
height: 100%;
}
.body-top-padding {
padding-top: $paneelikorkeus + 90px;
}
.marginaali {
margin-top: $paneelikorkeus;
#include vp-background-size(cover);
}
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
hr {
color: red;
background-color: red;
padding: 2px 2px 2px 2px ;
}
footer {
margin: 50px 0;
}

Answer 1

Try this code
.carousel {
height: 50%;
width: 60%;
margin: 0 auto;
}
DEMO