Почему в разных браузерах страница по разному?

О, брат, это вопрос вопросов!!! Кросс-платформменность море крови у верстальщиков пьет до сих пор. acidtestы помните? Каждый броузер, кто во что горазд их показывал и хуже всех традиционно Internet explorer

потому что так верстаешь, не правильно

От движка браузера зависит. У Хрома и Файрфокса разные движки, поэтому результат отображения разметки различен

Пользуйся справочниками HTML и CSS на https://webref.ru/
По каждому тэгу и свойству есть табличка по совместимости с браузерами.

А ты пользуешься этой документацией-то?
Там указано по каждому "параметру", в каком браузере и с какой версии он работает.

Если же указанное оказывается неверным, то надо отредактировать страницу, указав конкретно, в каком браузере, с какой версии по какую, и какое неправильное поведение. Это как википедия, можно предлагать свои правки.
Такие примечания там тоже можно писать, обозначаются звездочкой в таблице совместимости, и, кстати, у некоторых вещей уже есть такие звездочки. Все это надо учитывать.

И надо помнить, что HTML, CSS, да и JS - это "языки-помойки" с кучей легаси и экспериментальных технологий, которые использовать не надо.
Понимание, что использовать, а что нет, приходит с опытом.
Особенно это относится ко всяким "слишком удобным вещам" вроде input с уже готовым крестиком для очистки, которые на деле плохо поддерживаются разными браузерами.

Если используются только стандартные теги и не будет ошибок, то все будет одинаково.
А если будут ошибки, то никто не знает, что какому браузеру придет в голову как нарисовать.