引导右侧的4空白

Question

有谁能解释一下，为什么我在右边有一个空白，带着4呢？

这是页面的主代码块。

<main id="intro" role="intro" class="inner text-center">
    <h2>Lorum Ipsum</h2>
    <p class="lead">Register now!</p>
    <p class="lead">
      <a href="<?php echo HOME ?>/register" class="btn btn-light btn-lg">Click here</a>
    </p>
</main>

和定制的CSS

html,
body,
header,
#intro {
  height: 100%;
}

#intro {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/intro-1.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  color: #fff;
  padding-top: 250px;
}

如果需要，我可以提供一个网址到网站。谢谢你的帮助！！

编辑：这里是网站链接：http://drohnen-vz.de

Answer 1

您的问题是，您的页脚有一个没有容器的行，所以您可以从右侧获得边距。给您一个小提示，检查您的元素并删除它们，直到错误消失，然后您才知道是什么导致了错误。

通过向页脚添加容器类来修复页面：

<footer class="pt-4 my-md-5 pt-md-5 border-top text-center container">
  <div class="row">
    <div class="col-12 col-md">
      <img class="mb-2" src="img/logo-kurz.svg" alt="" width="75" height="75">
      <small class="d-block mb-3 text-muted">© 2018</small>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Links</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="http://drohnen-vz.de/agb">AGB</a></li>
        <li><a class="text-muted" href="http://drohnen-vz.de/impressum">Impressum</a></li>
        <li><a class="text-muted" href="#">Datenschutzrichtlinien</a></li>
      </ul>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Partner</h5>
      <ul class="list-unstyled text-small">
        <li><img src="img/partner-1.svg" width="100px"> <img src="img/partner-dhl.svg" width="100px"></li>
        <li><br></li>
        <li><img src="img/partner-sofort.svg" width="100px"> <img src="img/partner-paypal.svg" width="100px"></li>
      </ul>
    </div>
  </div>
</footer>