当我将网页的最大宽度调整为 800 像素时，该网站会添加一个水平滚动条，该滚动条会滚动到白色屏幕。我不确定是什么原因导致这种情况发生，并希望它不会发生。我的代码如下。
body {
margin: 0;
}
.Header {
position: fixed;
z-index: 1;
width: 100%;
height: 70px;
background-color: black;
text-align: right;
}
.headerLogo {}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid {
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
@media (max-width: 1200px) {
.header {
text-align: left !important;
padding-left: 20px;
}
.img-fluid {
height: 500px;
}
.header2 {
text-align: left;
}
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class="headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html"><h1 class = "header" style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class="Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class="Instagram">
<a href="https://www.instagram.com/"><img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
</a>
<a class="Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class=p reorder>
<button style="background-color: white;">Pre-Order</button>
</a>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="section1" style="background-color: black; color: white; padding-top: 150px;">
<a class="header1" style="padding-left: 200px; display:inline-block; width:85.2%">
<img src="FoldingIcon.PNG" height="45px">
<h1 class="header2" style="font-family: Verdana;font-size: x-large; text-align: start;">Some Header</h1>
<p style="margin-bottom: 200px; font-family: Verdana; color: gray;">
</p>
<img src="Backpack.PNG">
<h2 style="font-family: Verdana; font-size: x-large; text-align:start">Some Header</h2>
<p style="margin-bottom: 300px"></p>
</a>
<p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%;">
_________________________________________________________________________________________________________________________________________________________________________________________</p>
<h1 style="font-family: Verdana;font-size: x-large; text-align: start;padding-bottom: 400px; padding-left: 200px; display:inline-block;
padding-top: 150px;">Completely Customizable</h1>
</div>最佳答案
问题出在这一段。这些字符之间没有任何空格，因此如果视口(viewport)比该输出的宽度更窄，它不会中断或切断。
<p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%;">_________________________________________________________________________________________________________________________________________________________________________________________</p>
不确定你到底想做什么……我假设画了某种边界/规则？如果是这样，您应该使用 border 或 hr 或其他东西代替。
在保留该元素的同时修复布局的一种快速简便的方法是向其添加 overflow:hidden;。 http://codepen.io/anon/pen/VpOgpj
关于html - 调整网页大小导致网站添加白底溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43267819/