Why is my content not centering to the middle of the page even though I set it to-CodePudding

I'm trying to work on the responsiveness of my page and for some reason when I try to make all my content go to the middle of the page it just stays on the left of the page and doesn't center properly. I've been trying to fix it for awhile, I don't know if this is a inspect element bug or whatever but it's really irritating me, below I have my HTML and CSS, all in one so I'm sorry if it's a lot of unnecessary things but I'm using it all because something small could be the cause of it.

Gif of what I'm currently seeing

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 ></div>

    <div >
        <div >
            <h1><a href="#home">Cool Shibas</a></h1>
        </div>
        <div >
            <ul >
                <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"  data-color="main">
        <div >
            <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 >
                <a id="easeInOut"  href="#mint">Mint</a>
            </div>
        </div>
        <div>
            <img  src="images/coolShibaGif.gif" alt="gif">
        </div>
    </div>


    <div id="aboutUs"  data-color="salmon">
        <div >
            <div >
                <img src="images/icon.png" alt="icon">
            </div>
            <div >
                <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"  data-color="orange">
        <div >
            <div >
              <div >
                <h2>Phase 0: Just the start -</h2>
                <p>We’ll giveaway 500 whitelist spots to members in our discord community. 

                </p>
              </div>
            </div>
            <div >
              <div >
                <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 >
              <div >
                <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 >
              <div >
                <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 >
              <div >
                <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"  data-color="blue">
        <div >
            <h1>Meet the team</h1>
            <div >
                <div >
                    <img src="images/icon.png" alt="Kam">
                        <h2>Kam</h2>
                        <p>Founder & Marketer</p>
                </div>
                <div >
                    <img src="images/icon.png" alt="SmiiB">
                    <div >
                        <h2>SmiiB</h2>
                        <p>Developer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="mint"  data-color="green">
        <div >
            <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;
    }
    



  }

CodePudding user response：

It took a lot of time for me to do it. Hope you like it :)

* {
  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 ></div>

  <div >
    <div >
      <h1><a href="#home">Cool Shibas</a></h1>
    </div>
    <div >
      <ul >
        <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"  data-color="main">
    <div >
      <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 >
        <a id="easeInOut"  href="#mint">Mint</a>
      </div>
    </div>
    <div>
      <img  src="images/coolShibaGif.gif" alt="gif">
    </div>
  </div>


  <div id="aboutUs"  data-color="salmon">
    <div >
      <div >
        <img src="images/icon.png" alt="icon">
      </div>
      <div >
        <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"  data-color="orange">
    <div >
      <div >
        <div >
          <h2>Phase 0: Just the start -</h2>
          <p>We’ll giveaway 500 whitelist spots to members in our discord community.

          </p>
        </div>
      </div>
      <div >
        <div >
          <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 >
        <div >
          <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 >
        <div >
          <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 >
        <div >
          <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"  data-color="blue">
    <div >
      <h1>Meet the team</h1>
      <div >
        <div >
          <img src="images/icon.png" alt="Kam">
          <h2>Kam</h2>
          <p>Founder & Marketer</p>
        </div>
        <div >
          <img src="images/icon.png" alt="SmiiB">
          <div >
            <h2>SmiiB</h2>
            <p>Developer</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div id="mint"  data-color="green">
    <div >
      <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>

CodePudding user response：

I did nothing but it's still its center in both desktop & mobile size

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



  }

<div ></div>

    <div >
        <div >
            <h1><a href="#home">Cool Shibas</a></h1>
        </div>
        <div >
            <ul >
                <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"  data-color="main">
        <div >
            <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 >
                <a id="easeInOut"  href="#mint">Mint</a>
            </div>
        </div>
        <div>
            <img  src="images/coolShibaGif.gif" alt="gif">
        </div>
    </div>


    <div id="aboutUs"  data-color="salmon">
        <div >
            <div >
                <img src="images/icon.png" alt="icon">
            </div>
            <div >
                <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"  data-color="orange">
        <div >
            <div >
              <div >
                <h2>Phase 0: Just the start -</h2>
                <p>We’ll giveaway 500 whitelist spots to members in our discord community. 

                </p>
              </div>
            </div>
            <div >
              <div >
                <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 >
              <div >
                <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 >
              <div >
                <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 >
              <div >
                <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"  data-color="blue">
        <div >
            <h1>Meet the team</h1>
            <div >
                <div >
                    <img src="images/icon.png" alt="Kam">
                        <h2>Kam</h2>
                        <p>Founder & Marketer</p>
                </div>
                <div >
                    <img src="images/icon.png" alt="SmiiB">
                    <div >
                        <h2>SmiiB</h2>
                        <p>Developer</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="mint"  data-color="green">
        <div >
            <h1>Please wait till mint day</h1>
        </div>
    </div>