Такой же div выглядит меньше в Firefox и больше в Chrome

Question

Как следует из названия и как вы можете видеть в этом альбоме, один и тот же компонент выглядит больше в Chrome и меньше в Firefox: https://imgur.com/a/0fvXiZ6 Я также не понимаю, почему тело имеет разные размеры. Конечно, я не связывался с функциями масштабирования браузеров. Это css тела, html и контейнер, который охватывает каждый компонент этой формы:

    const GlobalStyle = createGlobalStyle`
  body,html {
    width: 100%;
    height: 100%;
    margin: 0;
    background: #1D9F76;
  }
`

const Container = styled.div`
    position: absolute;
    width: 400px;
    height: 440px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:flex;
    flex-direction: column;
    align-items: center;
`

Я думаю, что размещать остальные html и css не имеет значения, но я опубликую их, если это необходимо.