Нужна помощь css?

https://codepen.io/arthur294/pen/KOaObX

ImperatorGreasy, всё из-за position: absolute, абсолют вообще для таких вещей не надо использовать, вот положил эти три блока в общий контейнер (div class="wrap"), и в нем просто отцентровал чуток

https://codepen.io/anon/pen/jgygja

hzzzzl, спасибо!

hzzzzl, кстати, чем можно заменить position: absolute?
Чтобы не было такого смещения элементов при изменении масштаба

ImperatorGreasy, вообще не указывать, по умолчанию relative, то есть элемент будет вести себя так "как и всё остальное", то есть тупо рисоваться на странице слева направо, сверху вниз

если absolute, то вручную задаешь координаты элементу, это конечно может быть нужно, если что то надо РЕАЛЬНО разместить где-то на экране (эффект какой нибудь, итд), но карточки типа таких должны быть просто в отдельно контейнере и подчиняться правилам размещения в контейнере (как я выставил display:flex; justify-content: , чтобы их выравнять)

https://developer.mozilla.org/ru/docs/Web/CSS/position

hzzzzl, спасибо, учту

а как иначе?

Есть замечательная вещь в том же хроме встроенный DevTool, там выбираете
выбираете в окне браузера Responsive, далее вы можете списать в поля рядом любые ширину и высоту

прекратить это чекать?
лишать юзеров возможности масштабировать сайт как им хочется?

масштабирование через ctrl + "+"/"-" это бесполезное занятие (ИМХО) , как проверить разные разрешения экрана я показал выше