<div class="container">
  <div>I am a container</div>
  <div class="container">
    <div>I am a container inside a container</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 );
}

// 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, .2);
  padding: 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.