javascript - 网页右侧和底部的空白

Question

window.sr = ScrollReveal();
		sr.reveal('.b1', {
			duration: 2000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.b2', {
			duration: 1500,
			origin: 'top',
			distance: '80px'
		})
		sr.reveal('.b3', {
			duration: 1000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.w1', {
			duration: 3000,
			origin: 'right',
			distance: '200px'
		});
		sr.reveal('.w2', {
			duration: 3500,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.w3', {
			duration: 4000,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.h2-about', {
			duration: 2000,
			origin: 'top',
			distance: '150px'
		});
		sr.reveal('.left', {
			duration: 2000,
			origin: 'bottom',
			distance: '150px'
		});
		sr.reveal('.right', {
			duration: 2000,
			origin: 'bottom',
			distance: '150px'
		});


		const navBtn = document.querySelector('.menu-bars');
		const x = document.querySelector('.fa-times');
		const b1 = document.querySelector('.b1');
		const b2 = document.querySelector('.b2');
		const b3 = document.querySelector('.b3');
		const sideMenu = document.querySelector('.side-menu');
		navBtn.addEventListener('click', () => {

			x.style.left = '338px';
			sideMenu.style.left = '0px';

			addAnimation(b1);
			addAnimation(b2);
			addAnimation(b3);

			function addAnimation(bar) {
				bar.style.animationName = bar.className + '-animate';
			}
		});

		const aboutDiv = document.querySelector('.about-us');
		aboutDiv.addEventListener('mouseover', () => {
			const line = document.querySelector('.underline');
			line.style.animationName = 'line';
		})
		x.addEventListener('click', ()=> {
			sideMenu.style.left = '-400px';
			x.style.left = '-400px';
		})

html, body {
	margin: 0;
	padding: 0;
}

.side-menu {
	position: fixed;
	top: 165px;
	background-color: white;
	width: 299.5px;
	padding: 10px;
	transition: all 2s ease;
	left: -400px;
	transition: all 0.2s ease;
	z-index: 11;
}

.fa-times {
	font-size: 30px;
	position: fixed;
	color: white;
	left: -338px;
	top: 168px;
	transition: all 0.2s ease;
	z-index: 11;

}

.fa-times:hover {
	transform: scale(1.2);
}

.side-menu ul {
	list-style-type: none;
	text-align: center;
}

.side-menu li {
	color: grey;
	font-size: 1.8rem;
	margin: 6px;
	margin-left: -35px;
	margin-bottom: 35px;
	font-family: 'Josefin sans';
}

.side-menu li:hover {
	color: orange;
	cursor: pointer;
}

.menu-bars{
	position: fixed;
	left: 50px;
	top: 80px;
	z-index: 11;
}

.b1, .b2, .b3 {
	position: relative;
	width: 60px;
	height: 7px;
	background-color: red;
	margin:.55rem;
	left: 0px;
	top: 0px;
	border-radius: 9px;
}

.b1 {
	background-color: lightgreen;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
	animation-direction: backwards;
}

.b2 {
	background-color: white;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}

.b3 {
	background-color: #ff4d4d;
	animation-duration: 0.2s;
	animation-fill-mode: forwards;
}
@keyframes b1-animate {
	from {}
	to {
		width: 60px; height: 8px; position: relative; left: -67px; top: 49px; width: 100px; border-radius: 0; background-color: lightgreen;}
}

@keyframes b2-animate {
	from {}
	to {width: 60px;
	height: 8px;
	position: relative;
	left: 33px; 
	top: 32.5px; 
	width: 150px; 
	height: 7.75px; 
	border-radius: 0;
	background-color: white;}
}

@keyframes b3-animate {
	from {}
	to {width: 60px;
	height: 8px;
	position: relative;
	top: 16px;
	left: 161px; 
	width: 100px; 
	border-radius: 0;
	background-color: #ff4d4d;}
}

.intro {
	background: darkblue;
	width: 100vw;
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	margin-bottom: 0;
}

h1 {
	font-family: 'Cedarville Cursive';
	position: absolute;
	left: 700px;
	top: 50px;
	color: white;
	font-size: 3rem;
}

h2 {
	text-align: center;
	font-family: 'Cedarville Cursive';
	font-size: 3rem;
	padding: 30px;
	color: white;
}

.about-us {
	margin-top: -40px;
	padding-bottom: 90px;
	background-color: #339966;
	width: 100vw;
}

.underline {
	margin: 0;
	position: absolute;
	left: 570px;
	bottom: -120px;
	background-color: orange;
	width: 0px;
	height: 3px;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
	transition-timing-function: ease-out;
}

@keyframes line {
	from {left: 370px; width: 0px;}
	to {left: 580px; width: 210px; border-radius: 1.5px;}
}

p {
	position: relative;
	padding-left: 20px;
	top: -30px;
	color : white;
	font-size: 1.8rem;
	word-spacing: 7px;
	width: 400px;
	font-family: 'Josefin sans';
	margin-left: 155px;
}
.fa-caret-down {
	position: relative;
	width: 50px;
	height: 50px;
	font-size: 60px;
	color: lightgrey;
	left: 665px;
	bottom: 300px;
	transform: rotate(90deg);
	transition: all 0.5s ease;
}

.fa-caret-down:hover {
	color: white;
}

.image-slider {
	background-color: darkgrey;
	position: relative;
	width: 440px;
	height: 350px;
	right: -710px;
	bottom: 500px;
}


.right {
	position: relative;
	width: 50px;
	height: 50px;
	font-size: 60px;
	color: lightgrey;
	left: 1145px;
	bottom: 715px;
	transform: rotate(-90deg);
	transition: all 0.5s ease;
}

.right:hover {
	color: white;
}

.side-msg {
	font-family: 'Cedarville Cursive';
	font-size: 3rem;
	color:#e6ac00;
	position: relative;
	right: -550px;
	font-weight: bold;
	top: -560px;
	width: 1000px;
}

.chile {
	width: 460px;
	height: 345px;
	position: relative;
	top: 800px;
	right: 0px
	z-index: 11;
}

.menu-wrapper {
	width: 100VW;
	background-color: #e6ac00;
	height: 905px;
	position: relative;
	top: -720px;
	clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>El Metate | Mexican food</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
	<header>
		<nav>
			<div class="side-menu">
				<ul>
					<li>Home</li>
					<li>About</li>
					<li>Menu</li>
					<li>Contact</li>
					<li>Location</li>
					<li>News</li>
				</ul>
			</div>
			<i class="fas fa-times"></i>
			<div class="menu-bars">
				<div class="b1"></div>
				<div class="b2"></div>
				<div class="b3"></div>
			</div>
		</nav>
		<div class="intro">
			<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
		    
		</div>
	</header>

	<section class="about">
		<div class="about-us">
			<h2 class="h2-about">About Us</h2>
			<div class="underline"></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
			<i class="fas fa-caret-down left"></i>
			<div class="image-slider">p</div>
			<i class="fas fa-caret-down right"></i>
			<p class="side-msg">Taking you back to Mexico</p>
		</div>	
	</section>
	
	<section class="menu">
		<div class="menu-wrapper"></div>
	</section>

	<script src="script.js"></script>
</body>
</html>

嘿，伙计，我正在为本地企业开发一个网站，我刚刚注意到屏幕右侧和底部有一些巨大的空白。我的 html 和正文的边距设置为零？这并不总是存在。它在我工作时突然出现，直到现在我才注意到它，也无法弄清楚。任何帮助都是极好的。谢谢!

Answer 1

.side-msg 类的元素宽度为 1000px，这导致了不需要的空白。如果删除它，空间应该消失。