Searcher8

Вопрос кросс-брайзерности. Многие элементы на разных браузерах отражаются по-разному из-за встроенных стилей самого браузера.
Это обычно правиться разными способами, один из них аутопреффиксы.
Есть вариант использования других тегов, например ul со стилизацией его под задуманные стили и подключение js.
Другой вариант, это стилизация через псевдоэлементы, как например, часто делают с input.
Поскольку мне не известны изначальные требований технического задания по которому вы верстаете, могу лишь дать эти несколько вариантов решений. Они достаточно распространены, поэтому можно найти достаточно примеров с кодом в сети.

У flex элементов такое поведение может быть из-за того, что размер контейнера не вмещает все элементы, таким образом, чтобы они стояли в один ряд.
Советую открыть инструменты разработчика в браузере и через выбор элемента страницы, при изменении размера экрана, посмотреть подсвечиваемые марджины, паддинги и саму ширину элементов.
Плюс, если у тебя стоитflex-wrap: wrap;, значит, если все вложенные в контейнер элементы не помещаются в него в один ряд, те элементы, что в него не поместились, будут перенесены на следующую строку.

Попробуйте использовать в css grid-area для растановки элементов.
Также, если возникнут сложности с самостоятельным составлением кода с grid, можете попробовать воспользоваться генератором.
Ну, а потом уже просто меняете значения grid в медиа запросах @media ..... (min-width: 920px) {...}.