调整网页大小导致网站添加白底溢出

Question

当我将我的网页调整为最大宽度 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>

Answer 1

问题出在这一段。这些字符之间没有任何空格，因此如果视口比该输出的宽度更窄，它不会中断或切断。

<p style="color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%;">_________________________________________________________________________________________________________________________________________________________________________________________</p>

不确定你到底想做什么...我假设画某种 border/rule？如果是这样，您应该改用 border 或 hr 或其他东西。

在保留该元素的同时修复布局的一种快速简便的方法是向其添加 overflow:hidden;。 http://codepen.io/anon/pen/VpOgpj

调整网页大小导致网站添加白底溢出

Resizing webpage causes the website to add an overflow of a white background

html

css

overflow

screen-size