Что за отступ слева?

Question

[RustyS]

Сам смотрел отступы в браузерском коде элемента, но все равно не понимаю где облажал
https://a.dev-nodeadline.ru/ubereats.html

Comments

[v3shin]

Контент в колонки не влез.

[RustyS]

v3shin, значит, нужно изменить размер картинок/карточек?

[v3shin]

RustyS, как вариант.

[Mr_matrix]

не изменять размер а к примеру сделать так
img {
object-fit: cover;
width: 100%;
}

[Mr_matrix]

ещё у тебя блок под хедер лезет добавь margin-top:
в
.card {
box-sizing: content-box;
padding: 0.5%;
min-width: 33.333%;
}

[RustyS]

Mr_matrix, спасибо большое, действительно помогло. Но размер картинки все равно изменить надо - должно быть 75%, так как я скачал 2х изображение для покрытия ретины, как мне советовали, но при изменении несмотря на content-box - размер коробки всё тот же - обнуление margin и padding не помогло, не поможете и с этим, пожалуйста?

[Mr_matrix]

Размер коробки у тебя же в этих стилях, увеличь ширину до 50%
.card {
box-sizing: content-box;
padding: 0.5%;
min-width: 48.333%;
}

просто ширину подстраивай под себя как надо, или я что-то не понимаю

[RustyS]

Mr_matrix, прости, не знаю, как и почему, но после удаления box-sizing: content-box; все встало на свои места - min-width: 33.333%; до этого не работал. Спасибо большое за помощь!

[Mr_matrix]

RustyS,
content-box Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

всегда для всех элементов задают значение
* {
box-sizing: border-box;
}
дабы избежать неточности в вёрстке как например pixel perfect.
и всем элементам на странице больше не задают box-sizing.
существует уже множество свойств для позиционирования любых элементов на странице.
Удачи в познании )

Answer 1

[RustyS]

@Mr_matrix
"не изменять размер а к примеру сделать так
img {
object-fit: cover;
width: 100%;
}"

Answer 2

[Int0shiro]

Посмотри значения padding, margin, position: absolute, relative.