如何删除右侧的space？

Question

我的问题是右侧的白色 space。看起来它的宽度有问题，我试图用 html 和 body 上的 max-width 解决这个问题，但没有任何反应。

P.S。这不是完整的代码 space 出现在页面的每个部分。

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

尝试将 overflow-x: hidden; 添加到 CSS 的正文中，如下所示：

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%;
overflow-x: hidden; 
}

Answer 2

使用此代码。

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

你正在滚动，因为 width: 100%; ＆填充。填充值超出 space 所以宽度：100% + 填充 = 100%+ 您可以查看 link 了解更多信息。 https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Answer 3

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

简而言之，测量高度时包含填充。

如何删除右侧的space？

How to remove space on right side?

html

css

space

removing-whitespace