Wrappers

Elementos centralizados com espaçamento nas laterais.

classe wrapper: Largura maior "menos espaçamento", medida usa calc(rem + vw)

classe container: Largura menor "mais espaçamento", medida usa porcentagem%

.container, .wrapper {
    position: relative;
    display: block;
    max-width: 100%;
    margin: auto;
}
.wrapper {
    width: calc(4rem + 75vw)
}
.container {
    width: 92% 
}
@media(min-width: 320px) { 
    .container { width: 87% }
}
@media(min-width: 360px) { 
    .container { width: 84% }
}
@media(min-width: 480px) { 
    .wrapper { width: calc(3.5rem + 80vw) }
}
@media(min-width: 576px) { 
    .wrapper { width: calc(3rem + 86vw) }
}
@media(min-width: 1280px) { 
    .wrapper { width: calc(2.5rem + 90vw) }
}

Outras opções:

Utilitários de Margins e Paddings.

Utilitarios de Larguras junto com a classe mx para alinhar.