当我检查设备的响应性时，我似乎不知道额外的水平空间是什么，因为这个额外的空间，div没有正确居中，所以我无法将网站的标题和团队照片居中。有人能帮我弄清楚它在哪里吗？我知道它有很多代码，但我似乎找不到。
我目前看到的
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 $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>使用
@media only screen and (max-width: 600px) {
body {
overflow-x: hidden;
}
}