Если делать адапривную вёрстку то нужно учитывать размеры минимум 4ч экранов (менее 420, до 768, до 992 и более 1200). все контейнеры ко умолчанию должны иметь css свойство
box-sizing: border-box; и иметь степень вложенности .container>.row>.block где контейнер = width:100%, row = ширине относительно текущего media query (например 992px) и
mergin-left: auto; mergin-right:auto;
для .row пишите что то типа этого
@media only screen and (max-width: 420px) {
.row {
width:419px;
}
}
@media only screen and (max-width: 768px) {
.row {
width:766px;
}
}
@media only screen and (max-width: 992px) {
.row {
width:991px;
}
}
@media only screen and (min-width: 1200px) {
.row {
width:1280px;
}
}
А вообще если вы только озадачились адаптивной вёрсткой, то советую вам сразу начать с изучении фреймворка
bootstrap, который упростит вам работу в разы. (Ну или воспользоваться другими альтернативными css фреймворками)
