@uroot

Как убрать боковые отступы у контейнера?

Есть следующая галерея: песочница

У всех элементов галереи следующие стили:
.gallery__unit {
    min-width: 283px;
    display: flex;
    position: relative;
    justify-content: center;
    padding: 5px;
    flex: 1 0 calc(25% - 30px);
    height: 325px;
    overflow: hidden;
}

Если блок большой, то эму добавляется класс со стилями:
.large {
    position: relative;
    flex: 0 0 50%;
}

Сам контейнер-родитель:
.gallery {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: space-between;
}

Как видно, у элементов галереи есть паддинги: padding: 5px;

Но я хочу сделать галерею на всю ширину экрана, без боковых отступов в 5px. Как это сделать?

Указать разным блокам разный padding-left и padding-right не получится, ибо flexbox (все прыгает и подстраивается под экран) Думал контейнеру-родителю указать отрицательные маржины, но тогда же все сдвигается вправо на 5px и появляются лишние отступы справа.
  • Вопрос задан
  • 599 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Думал контейнеру-родителю указать отрицательные маржины

Да, все правильно, просто их же надо еще компенсировать шириной.
https://jsfiddle.net/s3Lm0p75/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы