Why does my React Web App look way different on some mobile devices?

This is my first question ever, so I apologize for any inconveniences in advance :)

I've been coding a static website in React using styled-components, and everything looks the way it should EXCEPT for on certain mobile devices. For some reason, almost all divs layers on top of each other, and buttons do not display properly - the worst bit is, that there seems to be no consistency between the broken styling. It works for some (iPhone XS for example) and it doesn't work for others (iPhone 11) - and I have no idea why.

Here are some pictures of how it looks on some mobile devices:

Intended look of first section:

Intended look of first section:

And here are some pictures of how broken it looks on my iPhone 11 for example:

Weird look of first section (the button is collapsed):

Complete mess - all sections collapsed on top of each other:

I've tried all the things I could think of:

• I've tried using pure css instead of styled-components

• I'm using Gatsby so I've also tried reinstalling gatsby and gatsby-cli and afterwards making a clean project

• I've tried deploying a clean react app (no gatsby) with just the
  code for the first section (still, the button looks weird)

• I've tried changing the CSS for the button (just for testing out
  where the errors are from before refactoring everything - still, no effect)

• I've tried deploying through Vercel (instead of Netlify)

• I've used https://autoprefixer.github.io to make sure that all my code CSS was supported on different browsers.

  None of these attempts changed anything.

I have no clue where to go now. Any Ideas?

For reference, here is the Button component - did I mess something up? (sorry, it's really ugly):

import React from "react";
import styled from "styled-components";

export default function Button({ content }) {
  return (
    <Container>
      <B href="#contactSection">{content}</B>
    </Container>
  );
}

const Container = styled.div`
  margin-top: 60px;

  width: 240px;
  height: 55px;

  background-color: rgb(35, 190, 115);
  border-radius: 30px;
  -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  -webkit-transition-duration: 0.3s;

  -o-transition-duration: 0.3s;

  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);

  &:hover {
    cursor: pointer;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  @media (max-width: 960px) {
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center;
  }
`;

const B = styled.a`
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
`;

Here is a link to the GitHub repo: https://github.com/ErikBachRyhl/worklay-website

This is a pretty chaotic post, but it is my last resort - any suggestions are extremely welcome, I'll take all the help I can get. Best regards and thanks in advance!