html - 如何删除右侧的空间？

Question

我遇到了右侧空白的问题。看起来它的宽度有问题，我试图解决 html 和 body 上的最大宽度问题，但没有任何反应。

问题:http://prntscr.com/j0c1y5

附言这并不是出现在页面每个部分的完整代码空间。

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  background-image: url("img/masaze.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#navbar-list {
  list-style-type: none;
  text-align: center;
  margin: 0;
  overflow: hidden;
  background-color: #000;
  width: 100%;
  opacity: 0.9;
  position: fixed;
}

#navbar-list li {
  text-align: justify;
  display: inline;
}

#navbar-list li a {
  color: white;
  text-decoration: none;
  display: inline-block;
}

#navbar-list li a:hover {
  color: #a0c2d5;
  transition: .5s;
}

.pocetna {
  font-size: 1.7rem;
  padding: 25px 20px;
  float: left;
}

.linkovi {
  padding: 35px 20px;
  position: relative;
  right: 180px;
}

.linkovi:active {
  color: black;
  background-color: white;
}

#main {
  text-align: center;
  padding-top: 15%;
}

#main h1 {
  font-size: 4.5em;
  text-shadow: 1px 1px 1px #000000;
}

#main h3 {
  font-size: 17pt;
}

hr {
  width: 615px;
}

.button {
  height: 50px;
  font-size: 20px;
  margin-top: 20px;
  cursor: pointer;
  padding: 10px;
  outline: none;
  text-decoration: none;
  border: none;
  border-radius: 3%;
}

.button a {
  color: black;
  text-decoration: none;
}

.button:hover {
  background-color: #a0c2d5;
  transition: .5s;
}

section {
  position: relative;
}

#video {
  background-color: rgba(20, 25, 25, 0.5);
  min-width: 100%;
  min-height: 100%;
  margin-top: 590px;
  z-index: 0;
  position: relative;
}

#section1 {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
  bottom: -5px;
  left: 0;
}

<nav>
  <div id="navbar">
    <ul id="navbar-list">
      <li>
        <a class="pocetna" href="#"><img src="img/logo icon.ico" width="30" height="30" style="padding-right:10px;">Masaže Gligorijević</a>
      </li>
      <li class="linkovil"><a class="linkovi" href="#">Početna</a></li>
      <li class="linkovil"><a class="linkovi" href="#section1">O nama</a></li>
      <li><a class="linkovi m" href="#section2">Kontakt</a></li>
    </ul>
  </div>
</nav>

<header>
  <div id="main">
    <h1>Masaže Gligorijević</h1>
    <h3>Ulaganjem u svoje zdravlje, ulažete u kvalitet sopstvenog života.</h3>
    <hr>
    <button class="button"><i class="fas fa-play"></i> <a href="#section2">Rezervišite Odmah</a></button>
  </div>
</header>

<section>
  <video autoplay muted loop id="video">
                <source src="klip.mp4" type="video/mp4">
            </video>

  <div id="section1">
    <h3>O nama</h3>
    <p>

    </p>
  </div>
</section>

Answer 1

使用此代码。

*, *::before, *::after {
    box-sizing: border-box;
}

你正在滚动是因为 width: 100%; ＆填充。填充值得到外部空间所以宽度:100% + padding = 100%+您可以查看链接以获取更多信息。 https://www.w3schools.com/cssref/css3_pr_box-sizing.asp