为什么即使我将内容设置为答案

【问题标题】：Why is my content not centering to the middle of the page even though I set it to为什么即使我将内容设置为
【发布时间】：2022-02-05 20:36:47
【问题描述】：

我正在努力提高页面的响应能力，但由于某种原因，当我试图让我的所有内容都转到页面中间时，它只是停留在页面的左侧并且不能正确居中。我一直在尝试修复它一段时间，我不知道这是一个检查元素错误还是其他什么，但这真的让我很恼火，下面我有我的 HTML 和 CSS，所以我很抱歉如果它是很多不必要的东西，但我都在使用它，因为一些小东西可能是它的原因。

我目前看到的图片

https://gyazo.com/0792994d918299b3555b0b115ca3ba27

HTML

<!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="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 <br>adipisicing elit.Earum quos excepturi explicabo<br> temporibus ad, eos enim reprehenderit repellat <br>dolore quasi molestias dignissimos eligendi mollitia <br> 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 $25,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 $25,000 in giveaways to our holders. We’ll also  drop our Cool Shibas merch line to all holders. We’ll also be giving $100,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>

CSS

* {
    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 {
    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;
}

#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;
    justify-content: space-around;
    align-items: center;
}

#roadMap {
    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: 2em;
    }
    
    .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;
        
    }

    #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;
        padding-top: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }

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

    .teamWrapper img {
        width: fit-content;
    
    }

    .meetTheTeamSetup {
        padding-top: 5em;
    }

    .buttonSpacing {
        margin: 5em;
    }
    



  }

【问题讨论】：

欢迎来到 SO。当涉及到asking a good question 时，您可能会发现阅读网站help section 很有用。为了获得您问题的最佳答案，我们希望看到您首先尝试使用minimal reproducible example 自己解决问题。这是question checklist，您可能会觉得有用...
您发布了至少 500 行代码。你真的认为我们想在回答你之前剖析它们吗？如果您希望得到答案，请先按照本网站指南中的建议进行简化
再次检查它已经在 center+ 中，而不是像<img src="images/icon.png" alt="icon"> 那样将有 src 的问题发布到根文件夹@ 用照片的 URL 发布它（在某处上传照片在线像谷歌驱动器和不在您的项目文件夹中），例如：<img src="https://drive.google.com/photo.png..." alt="icon">

标签： html css flexbox

【解决方案1】：

我花了很多时间来做这件事。希望你喜欢:)

* {
  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 {
  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;
}

#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;
  justify-content: space-around;
  align-items: center;
}

#roadMap {
  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: 2em;
  }
  .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;
  }
  #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;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
  }
  .meetTheTeamSetup h1 {
    font-size: 50px;
  }
  .mainPage h1 {
    font-size: 40px;
  }
  .aboutUsInfo {
    display: flex;
    flex-direction: column;
  }
  .aboutUsInfo h1 {
    font-size: 25px;
  }
  
  .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;
  }
  .teamWrapper img {
    width: fit-content;
  }
  .meetTheTeamSetup {
    padding-top: 5em;
  }
  .buttonSpacing {
    margin: 5em;
  }
}

<!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 $25,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 $25,000 in giveaways to our holders. We’ll also drop our Cool Shibas merch line to all holders. We’ll also be giving $100,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>

我在媒体查询中添加了这个 -

.aboutUsInfo {
    display: flex;
    align-items: center;
    background-color: seashell;
    height: fit-content;
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
    text-align: center;
  }
  .meetTheTeamSetup h1 {
    font-size: 50px;
  }
  .mainPage h1 {
    font-size: 40px;
  }
  .aboutUsInfo {
    display: flex;
    flex-direction: column;
  }
  .aboutUsInfo h1 {
    font-size: 25px;
  }
  
  .logo{
    width: 100%;
    text-align: center;
  }
  
  .header{
    display: flex;
    flex-direction: column;
  }
  
  .menu{
    display: flex;
    justify-content: center;

这使第一件事成为中心，然后我添加了

.aboutUsInfo {
        display: flex;
        flex-direction: column;
      }

这使项目按列显示然后我添加了

.logo{
        width: 100%;
        text-align: center;
      }
      
      .header{
        display: flex;
        flex-direction: column;
      }
      
      .menu{
        display: flex;
        justify-content: center;

这会使徽标 100% 占据整个宽度并进入屏幕中心，然后我将第二列中的所有导航栏链接设为中心 Atlast 我添加这个是为了让你的容器中心 -

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

【讨论】：

请解释一下你做了什么
我已经编辑了答案并告诉我我做了什么