Избавляемся от обертки wrapper

UPD! Работает только при использовании box-sizing: content-box;

Проблема.

Зачастую, к примеру, для футера нам нужно сделать заливку цветом, а контент центрировать.

Для этого используем обертку .wrapper с margin: 0 auto;

<footer>    
    <div class="wrapper">        
        <!-- Здесь находится содержимое -->    
    </div> 
</footer>

И CSS

footer {    
    background: #333; 
} 
.wrapper {    
    max-width: 900px;    
    margin: 0 auto; 
}

Решение.

Однако, от обертки можно избавиться, используя calc().

Мы будем выравнивать контент с помощью padding:

footer {    
    padding: calc(50% - 900px);    
    background: #333;
}

Можно padding вынести в миксин для удобства:

.wpr {
  padding: 0 calc(~'50% - 450px');
}
footer {
  .wpr;
  background-color: #333;
}