Проблема в этом
.blog-list li:first-child + li {
margin-left: 2%;
}
У вас старнно сделана верстка. Есть 3 колонки. А маргины только у центральной. Да сумма 3 х 32 + 2 + 2 = 100. Но тут есть проблемы при зумировании. Кратность может не попасть в 4 или 2. Поэтому это видно только на центральной так как отступы применены только к ней и белый фон просматривается так как кратность не совпадает именно для этой колонки на некоторых зумах.
Решение
Нужно сделать сначала чистый грид
<div class="grid">
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
</div>
.grid .cell {
float: left;
width: calc((100% - 40px) / 3);
margin-right: 20px;
}
.grid .cell:last-child {
margin-right: 0px;
}
Значит тут мы высчитываем ширину колонки если это 3 колонки и растояние между колонками всего 20 пикселей. Так как у нас всего 2 промежутка то сумма промежутков будет 40 пикселей. Получается 100% - 40 пикселей это конечная ширина для колонок. Делим на 3 и получаем ширину колокни.
Теперь в нутрь грида можно вставлять что угодно.
Но я бы посоветовал использовать готовые решения как например
bootstrap где сетка не только готова, но может так же адоптироваться под мобильные устройства.
