[27/32] 100% Строим сетку. Как можно уменьшить CSS?!

Курсы §15. Сетки
1 
       <header>
        <div class="header_top center">
            Header
        </div>
        <div class="header_middle">
            <div class="header_pad center">Menu</div>
        </div>
        <div class="header_bottom center">
            <div class="promo1">Promo 1</div>
            <div class="promo2">Promo 2</div>
        </div>
    </header>
    <main class="center">
        <div class="main_left">Left</div>
        <div class="main_center">Main</div>
        <div class="main_right">Right</div>
    </main>
    <footer>
        <div class="footer center">Footer
        </div>
    </footer>
</body>

html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

main::after {
content:’’;
display: table;
clear: both;
}

.center {
width: 340px;
margin: 0 auto;
}

header {
background:#34495e;
min-height: 160px;
padding-top: 10px;
margin-bottom: 10px;
}

.header_top {
min-height: 25px;
background: #c0392b;
margin-bottom: 10px;
padding: 5px 5px;
}

.header_middle {
background: #3498DB;
min-height: 35px;
margin-bottom: 10px;
}

.header_pad {
padding: 5px 5px;
}

.header_bottom {
width: 350px;
}

.promo1 {
width: 165px;
min-height:55px;
background: #c0392b;
float: left;
margin-right: 10px;
padding-top: 5px;
padding-left:5px;
}

.promo2 {
width: 165px;
min-height:55px;
background: #c0392b;
float: left;
padding-top: 5px;
padding-left:5px;
}

main.center {
width: 350px;
}

.main_left {
width: 60px;
min-height: 100px;
background: #3498DB;
float: left;
margin-right: 10px;
padding: 5px 5px;
}

.main_center {
width: 180px;
min-height:100px;
float: left;
background: #3498DB;
padding: 5px 5px;
}

.main_right {
width: 60px;
min-height:100px;
float: right;
background: #3498DB;
padding: 5px 5px;
}

footer {
background:#34495e;
min-height: 40px;
margin-top: 10px;
}

.footer {
height: 30px;
padding: 5px 5px;
}

Подскажите по оптимизации.

2

объединить повторяющиеся свойства в одно общее правило.

например:

    promo1 {
width: 165px;
min-height:55px;
background: #c0392b;
float: left;
margin-right: 10px;
padding-top: 5px;
padding-left:5px;
}

.promo2 {
width: 165px;
min-height:55px;
background: #c0392b;
float: left;
padding-top: 5px;
padding-left:5px;

правила для promo1 и promo2 у вас отличаются только тем, что для promo1 задан margin-right: 10px; всё остальное полностью совпадает. Тогда зачем писать дважды? Делаем одно общее правило для promo1 и promo2, где задаем все общие свойства, и отдельное правило для promo1 с маргином.