未知的右边距仅显示在移动页面上

Question

虽然使用计算机时一切正常，但是一旦我在手机上进行测试，我在右边得到了一个奇怪的空白，我将主体背景颜色更改为黑色，而空白的颜色现在是黑色，所以我猜它来自于主体标签。

我不能提供整个CSS代码+1000行，但这是影响边距/正文的行

我尝试将正文margin和padding设置为0，但是没有设置。

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #000;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  font-family: 'PT Sans Narrow', sans-serif;
  text-rendering: optimizeLegibility;
  height: 100%;
}

@media (max-height: 400px) {
  body {
    height: 100vh;
  }
}

<div class="open">
  <div class="layer"></div>
  <div class="layer"></div>
</div>
<div class="wrapper">
  <div class="wrap">
    <section>
      <div class="header">
        <h2 class="logo">Fallen Angels</h2>
        <i class="fa fa-bars x2" onclick="menuToggle()" />
        <ul id="navbar">
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">Accounts</a></li>
          <li><a href="#">Boosting</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">Login</a></li>
          <li><a href="#">Sign Up</a></li>
          <i class="fa fa-times x2" onclick="menuToggle()"></i>
        </ul>
      </div>
      <div class="bannerText">
        ...
      </div>
    </section>
  </div>
</div>

我期望更换身体的width来解决它，但是它只是减小了整个身体的大小，包括margin：/ 网站预览：http://preview.fallen-angels.ga/

Answer 1

通常会出现此问题，我通常会逐个检查元素。您的案例的问题在于此元素：

<img src="assets/img/Xpreview.png" width="140%" style="padding-right: 40%;">

在小屏幕中，col-md-6的宽度为100％。向右填充40％，可以将元素宽度的40％添加到图像中。这就是为什么它超出了屏幕宽度，并在那里增加了额外的空间。 您可以使用style="max-width:100%"来解决问题。 因此，您可以改写为：

<img src="assets/img/Xpreview.png" width="140%" style="max-width:100%">