Component position changing when opening developer portal

import { useState } from "react";

function App() {
  return (
    <>
      <div className="flex w-full h-screen">
        <div className="mx-auto my-auto text-white flex flex-col bg-gray-700 rounded-2xl p-8">
          <div className="flex flex-col items-center px-2">
            {/* Profile + Name + Location */}
            <div className="flex flex-col items-center mb-4 px-10">
              <div className="h-[75px] w-[75px] mb-4 rounded-[100%] bg-yellow-200"></div>
              <h1 className="text-2xl">Some Name</h1>
              <h2 className="text-xl">Location</h2>
            </div>
            {/* Interests */}
            <div className="mb-5">Interests will go here</div>
          </div>
          <div className="flex flex-col gap-4">
            <button className="px-[120px] py-[10px] bg-gray-600 rounded-md">
              Github
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Frontend Mentor
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Linkedin
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Twitter
            </button>
            <button className="py-[10px] bg-gray-600 rounded-md">
              Instagram
            </button>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;