网页右侧和底部的空白

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>

嗨，盖伊（Guy），我正在一家网站上进行本地商务活动，我刚刚注意到屏幕的右侧和底部有一些巨大的空白。我的html和body的边距设置为零？这并不总是在那里。当我工作时，它突然弹出，直到现在我都没有注意到它，无法弄清楚。任何帮助都是极好的。谢谢！

Answer 1

类别为.side-msg的元素的宽度为1000px，这会导致不必要的空白。如果将其删除，该空间将消失。