Right aligned container

Stackoverflow reply

by Rhythm Ruparelia

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid container-right">
  <div class="inner">Container</div>
</div>
<div class="container">
  <div class="yellow">Normal container</div>
</div>

SCSS

.inner {
  background: brown;
}
.yellow {
  background:yellow;
}


@media (min-width:768px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 375px);
  }
}

@media (min-width:992px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 485px);
  }
}

@media (min-width:1200px){
  .container-right {
    margin-right: 0;
    margin-left: calc(50vw - 585px);
  }
}