Как выровнять картинку?

sciencefront, если одно поверх другого то абсолют

Как выровнять картинку?

не обязательно, попробуй так
wpapper__logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
ну это если лого сверху по центру и надпись ниже по центру

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

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

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

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

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

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

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

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

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

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