<div class="note">All containers are perfectly aligned on smaller screens!</div>
<div class="container">
  <div>I am a container</div>
  <div class="container">
    <div>I am a container inside a container</div>
    <div class="container-sm">
      <div>I am a small container inside a nested container</div>
    </div>
    <div class="container-xs">
      <div>I am an extra-small container inside a nested container</div>
    </div>      
  </div>  
</div>
// Seting variables
$container--width: 1080px; // container width
$container--width-sm: 896px; // container sm width
$container--width-xs: 620px; // container xs width
$container--padding: 16px; // container, left and right padding

.container,
.container-sm,
.container-xs {
  width: 100%;
  margin: 0 auto;
  padding-left: $container--padding;
  padding-right: $container--padding;
}

.container {
  max-width: $container--width + ($container--padding * 2);
}

.container-sm {
  max-width: $container--width-sm + ($container--padding * 2);
}

.container-xs {
  max-width: $container--width-xs + ($container--padding * 2);
}

[class*='container'] {
  [class*='container'] {
    padding-left: 0;
    padding-right: 0;
  }

  .container-sm {
    max-width: $container--width-sm;
  }

  .container-xs {
    max-width: $container--width-xs;
  }
}

// Pen CSS
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding: 24px 0;
  font-family: 'Heebo', sans-serif;
  color: #575e86;
}

[class*='container'] > * {
  background: rgba(0, 194, 169, 0.2);
  padding: 24px;
}

.note {
  text-align: center;
  margin-bottom: 24px;
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Heebo:400,700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.