为什么我的 React 应用程序布局和站点外观在我通过 github 页面部署时会发生变化，但在本地运行时看起来很正常？

Question

我制作了一个react-app，当我在本地运行它时（http://localhost:3000/），它可以工作并且看起来很好。我尝试通过 GitHub Pages 部署它，布局全乱了（额外的间距，

---

标签看起来不同等。）我尝试卸载并重新安装 gh-pages，但这产生了相同的结果，我不知道还能尝试什么，因为似乎以前没有人真正经历过这种情况。这是我的 package.json 文件。我有最新版本的 gh-pages。

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://adheenachacko.com",
  "dependencies": {
    "@emotion/styled": "^10.0.15",
    "bootstrap": "^4.3.1",
    "gh-pages": "^2.1.1",
    "mdbreact": "^4.19.0",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.10",
    "react-dom": "^16.8.6",
    "react-mailto": "^0.4.0",
    "react-native": "^0.60.4",
    "react-protected-mailto": "^1.0.3",
    "react-reveal": "^1.2.2",
    "react-rounded-image": "^2.0.2",
    "react-scripts": "3.0.1",
    "react-scroll": "^1.7.12",
    "react-split-pane": "^0.1.87",
    "react-splitter-layout": "^4.0.0",
    "react-strap": "^0.0.1",
    "react-typist": "^2.0.5",
    "reactstrap": "^8.0.1",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.87.3",
    "vertical-timeline-component-for-react": "^1.0.6"
  },
  "scripts": {
    "predeploy": "yarn run build",
   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "install:clean": "export NODE_TLS_REJECT_UNAUTHORIZED=0 && yarn install"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-plugin-emotion": "^10.0.15"
  }
}

我希望我的页面正常

---

标签来划分页面的各个部分，并使用 (
) 来正常间距。但是，我部署后的输出使得

---

用不同的颜色标记巨大，这会弄乱页面的外观，并且空间都更大，使整个布局变得混乱。