无法弄清楚是什么导致了额外的水平 space 并且无法修复它

Question

当我检查设备的响应能力时，我似乎无法弄清楚额外的水平 space 是什么，因为这个额外的 space div 没有正确居中所以我无法将网站的 header 和我的团队照片居中。谁能帮我弄清楚它在哪里？我知道它有很多代码，但我似乎找不到它。

我目前看到的

https://gyazo.com/b3891ce06ef29f7a20bc29e3a9043f08

* {
  margin: 0;
  font-family: 'Comfortaa', cursive;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

body {
  transition: background-color 1s ease;
}

.cursor {
  cursor: none;
  height: 25px;
  width: 25px;
  background-color: rgb(55, 55, 56);
  border-radius: 50%;
  position: absolute;
  display: none;
  z-index: 1;
  pointer-events: none;
  transition: background-color 1s
}

.changeSize {
  background-color: maroon;
}

.mainPage {
  width: 100%;
  font-size: 3.5em;
}

.mainPage p {
  padding-top: 1em;
  font-size: .4em;
}

.mainPage h1 {
  background: -webkit-linear-gradient(45deg, lightskyblue, rgb(90, 84, 84));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.headerFont {
  display: flex;
  justify-content: space-between;
  padding: 1.5em;
}

.menuList {
  display: flex;
  padding: 1em;
}

.menuList a {
  text-decoration: none;
  color: black;
}

.menuList a:hover {
  text-decoration: none;
  color: grey;
  transition: ease-in 250ms;
}

.menuList li {
  list-style: none;
  padding-left: 1em;
}

.headerFont h1 {
  font-size: 3em;
}

.panel {
  min-height: 100vh;
  width: 100%;
}

#home {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#aboutUs {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#mint {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#team {
  display: flex;
  width: 100%;
  width: fit-content;
  margin: 0;
  justify-content: space-around;
  align-items: center;
}

#roadMap {
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
}

.roadMapSetup {
  text-align: center;
}

.roadMapHeader h1 {
  font-size: 5em;
  padding-bottom: 1em;
  color: black;
}

.m25,
.m50,
.m75,
.m100 {
  border-radius: 10px;
  display: flex;
  align-items: center;
  height: 15vh;
  padding: 1em;
  transition: background-color .4s;
}

.m25:hover,
.m50:hover,
.m75:hover,
.m100:hover {
  background-color: seashell;
}

#easeInOut {
  transition-timing-function: ease-in-out;
}

.color-main {
  background-color: seashell;
}

.color-salmon {
  background-color: salmon;
}

.color-orange {
  background-color: rgb(241, 173, 45);
}

.color-blue {
  background-color: lightskyblue;
}

.color-green {
  background-color: lightgreen;
}

.gifShibas {
  border: 5px solid black;
}

.meetTheTeamSetup h1 {
  font-size: 5em;
  padding-bottom: 1em;
  color: black;
}

.teamWrapper {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

.member {
  text-align: center;
  background-color: seashell;
  border: 5px solid black;
}

.memberDesc {
  background-color: seashell;
  height: 10vh;
  text-align: center;
}

.aboutUsGif img {
  height: 50vh;
  width: 50vh;
  border: 5px solid black;
}

.aboutUsInfo {
  display: flex;
  align-items: center;
  background-color: seashell;
  height: 50vh;
  padding-left: 1em;
  padding-right: 1em;
}

.aboutWrapper {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mintButton {
  background: -webkit-linear-gradient(45deg, rgb(225, 0, 255), rgb(92, 2, 80));
  padding: 15px 32px;
  border-radius: 5%;
  font-size: .75em;
  text-decoration: none;
  color: seashell;
  transition: box-shadow .4s;
}

.mintButton:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

#easeInOut {
  transition-timing-function: ease-in-out;
}

.logo a {
  text-decoration: none;
  color: black;
}

.timeline {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  background: seashell;
  left: 50%;
  margin-left: -3px;
}

.container {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

.container::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -17px;
  width: 25px;
  height: 25px;
  background-image: url("images/icon5.jpg");
  background-size: cover;
  border-radius: 50%;
  z-index: 10;
  border: 4px solid #FC2E20;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.container:nth-child(1)::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -17px;
  width: 25px;
  height: 25px;
  background-image: url("images/icon.png");
  background-size: cover;
  border-radius: 50%;
  z-index: 10;
  border: 4px solid #FC2E20;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.container:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -17px;
  width: 25px;
  height: 25px;
  background-image: url("images/icon2.jpg");
  background-size: cover;
  border-radius: 50%;
  z-index: 10;
  border: 4px solid #FC2E20;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.container:nth-child(3)::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -17px;
  width: 25px;
  height: 25px;
  background-image: url("images/icon3.jpg");
  background-size: cover;
  border-radius: 50%;
  z-index: 10;
  border: 4px solid #FC2E20;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.container:nth-child(4)::after {
  content: '';
  position: absolute;
  top: 15px;
  right: -17px;
  width: 25px;
  height: 25px;
  background-image: url("images/icon4.jpg");
  background-size: cover;
  border-radius: 50%;
  z-index: 10;
  border: 4px solid #FC2E20;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

.left {
  left: 0;
}

.right {
  left: 50%;
}

.right::after {
  left: -16px;
}

.left::before {
  content: '';
  height: 0px;
  width: 0px;
  position: absolute;
  top: 22px;
  right: 30px;
  border: 10px solid seashell;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent seashell;
}

.right::before {
  content: '';
  height: 0px;
  width: 0px;
  position: absolute;
  top: 22px;
  left: 30px;
  border: 10px solid seashell;
  border-width: 10px 10px 10px 0;
  border-color: transparent seashell transparent transparent;
}

.content {
  padding: 20px 30px;
  background: seashell;
  border-radius: 6px;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}


/* Mobile version */

@media screen and (max-width: 600px) {
  .timeline::after {
    left: 31px;
  }
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  .container::before {
    left: 60px;
    border-width: 10px 10px 10px 0;
    border-color: transparent seashell transparent transparent;
  }
  .left::after,
  .right::after {
    left: 15px;
    z-index: 1;
  }
  .right {
    left: 0;
  }
}

@media screen and (max-width: 800px) {
  .panel {
    min-height: 150vh;
  }
  .mainPage {
    font-size: 3em;
  }
  .mainPage p {
    padding-top: 1em;
    font-size: .5rem;
  }
  .mainPage h1 {
    background: -webkit-linear-gradient(45deg, lightskyblue, rgb(90, 84, 84));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  #home {
    width: 100vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .aboutWrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .aboutUsInfo {
    display: flex;
    align-items: center;
    background-color: seashell;
    height: fit-content;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
  }
  .meetTheTeamSetup h1 {
    font-size: 50px;
  }
  .mainPage h1 {
    font-size: 40px;
  }
  .aboutUsInfo {
    display: flex;
    flex-direction: column;
  }
  .aboutUsInfo h1 {
    font-size: 1.15rem;
    ;
  }
  .logo {
    width: 100%;
    text-align: center;
  }
  .header {
    display: flex;
    flex-direction: column;
  }
  .menu {
    display: flex;
    justify-content: center;
  }
  .teamWrapper {
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  .meetTheTeamSetup {
    padding-top: 5em;
  }
  .buttonSpacing {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
  }
  .aboutUsGif img {
    height: 25vh;
    width: 25vh;
    border: 5px solid black;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cool Shibas</title>
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
  <link rel="shortcut icon" type="image/jpg" href="images/icon.png" />
</head>

<body>
  <div class="cursor"></div>

  <div class="header headerFont">
    <div class="logo">
      <h1><a href="#home">Cool Shibas</a></h1>
    </div>
    <div class="menu">
      <ul class="menuList">
        <li><a href="#home">Home</a></li>
        <li><a href="#aboutUs">About Us</a></li>
        <li><a href="#roadMap">Road Map</a></li>
        <li><a href="#team">Team</a></li>
        <li><a href="#mint">Mint</a></li>
      </ul>
    </div>
  </div>


  <div id="home" class="panel" data-color="main">
    <div class="mainPage">
      <h1>Cool Shibas</h1>
      <p>Consectetur enim sint consectetur ipsum laborum eu et ut.
        <Br>Ad aliqua irure voluptate commodo exercitation ullamco elit qui minim. <br>Irure ipsum eiusmod reprehenderit id id nulla ullamco elit
        <Br>adipisicing tempor non exercitation magna.</p>
      <br>
      <div class="buttonSpacing">
        <a id="easeInOut" class="mintButton" href="#mint">Mint</a>
      </div>
    </div>
    <div>
      <img class="gifShibas" src="images/coolShibaGif.gif" alt="gif">
    </div>
  </div>


  <div id="aboutUs" class="panel" data-color="salmon">
    <div class="aboutWrapper">
      <div class="aboutUsGif">
        <img src="images/icon.png" alt="icon">
      </div>
      <div class="aboutUsInfo">
        <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.Earum quos excepturi explicabo temporibus ad, eos enim reprehenderit repellat dolore quasi molestias dignissimos eligendi mollitia error dicta aut pariatur facere quidem!</h1>
      </div>
    </div>
  </div>

  <div id="roadMap" class="panel" data-color="orange">
    <div class="timeline">
      <div class="container left">
        <div class="content">
          <h2>Phase 0: Just the start -</h2>
          <p>We’ll giveaway 500 whitelist spots to members in our discord community.

          </p>
        </div>
      </div>
      <div class="container right">
        <div class="content">
          <h2>Phase 1: Release -</h2>
          <p>Cool Shibas minting will be open on our minting website. We’ll reach out to different influencers to promote our project.</p>
        </div>
      </div>
      <div class="container left">
        <div class="content">
          <h2>Phase 2: 25% minted -</h2>
          <p>We'll create a DAO wallet and holders will have a say how much ETH will go into the wallet, We'll put 5 ETH of our own into the wallet. Along with that, we will be doing multiple ETH giveaways for holders and non-holders.</p>
        </div>
      </div>
      <div class="container right">
        <div class="content">
          <h2>Phase 3: 50% minted -</h2>
          <p>We'll giveaway 20 Cool Shiba NFTs. Along with that we will also be giving away ,000 to a charity chosen by the community.</p>
        </div>
      </div>
      <div class="container left">
        <div class="content">
          <h2>Phase 4: 100% minted -</h2>
          <p>We will give away a total of ,000 in giveaways to our holders. We’ll also drop our Cool Shibas merch line to all holders. We’ll also be giving 0,000 to a charity of community’s choice.</p>
        </div>
      </div>
    </div>
  </div>

  <div id="team" class="panel" data-color="blue">
    <div class="meetTheTeamSetup">
      <h1>Meet the team</h1>
      <div class="teamWrapper">
        <div class="member">
          <img src="images/icon.png" alt="Kam">
          <h2>Kam</h2>
          <p>Founder & Marketer</p>
        </div>
        <div class="member">
          <img src="images/icon.png" alt="SmiiB">
          <div class="memberDesc">
            <h2>SmiiB</h2>
            <p>Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="mint" class="panel" data-color="green">
    <div class="mainPage">
      <h1>Please wait till mint day</h1>
    </div>
  </div>

</body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="script.js"></script>

</html>

Answer 1

使用

@media only screen and (max-width: 600px) {
   body {
     overflow-x: hidden;
   }
}

无法弄清楚是什么导致了额外的水平 space 并且无法修复它

Cant figure out what's causing the extra horizontal space and can't fix it

html

css

flexbox