css-grid себя ведёт предсказуемо при среднем и большом расширении экрана. Однако, при создании мобильной версии сайта возникла проблема: появляется внешний отступ справа.
Контейнер вмещает в себе 7 блоков (шапка, подвал и т.д.).
.container {
width: 95%;
margin: auto;
margin-top: 2%;
margin-bottom: 2%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px 500px 400px 400px 50px;
grid-gap: 25px 25px;
justify-content: center;
}
И медиа-запрос для мобильной версии
@media (max-width: 479px) {
width: 100%;
margin: 0;
grid-template-columns: 1fr;
grid-template-rows: 300px 800px 400px 400px 50px;
margin-bottom: 0;
grid-gap: 25px 0;
}
Почему, если одна колонка, то появляется этот отступ? Пробовал его убрать, изменяя свойство justify-content, но не получилось. Делал нулевые отступы, но безрезультатно. Пробовал компенсировать уменьшением размера контейнера до 85%, но результат меня не устроил, так как это не убирает сам отступ.