Question

我的网页右侧有一些空间，我想摆脱它。

我已经检查过以确保我的标题中没有额外的填充。我还检查了Stack Overflow上的多个其他类似问题，包括this one和this one，但它们没有提供适合我的答案。我检查过我的代码是否有任何不必要的边距或边框，我找不到任何。我也尝试将溢出更改为隐藏但没有运气。

我已将网页缩小到我发现导致问题的小区域。

这是我的HTML：

#h1 {
    width: 100%;
    position: absolute;
    top: 100px;
    left: 60%;
    font-size: 50px;
    color: white;
    z-index: 2;
  }

  #back1 {
    display: block;
    width: 250px;
    height: 75px;
    position: absolute;
    top: 127px;
    left: 59%;
    background: grey;
    opacity: 0.7;
  }

  #p1 {
    width: 490px;
    height: 200px;
    position: absolute;
    top: 230px;
    left: 19%;
    font-size: 20px;
    color: white;
    z-index: 2;
  }


  #back2 {
    display: block;
    width: 500px;
    height: 200px;
    position: absolute;
    top: 230px;
    left: 18%;
    background: grey;
    opacity: 0.7;
  }

  .parallax { 
      background-image: url("https://pi.tedcdn.com/r/tedideas.files.wordpress.com/2017/05/featured_art_heal_forests.jpg");
      height: 500px; 
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
  }

  body {
    background: #223031;
    background: -webkit-linear-gradient(top right,#223031,#178d50); 
    background: -o-linear-gradient(top right,#223031,#178d50);
    background: -moz-linear-gradient(top right,#223031,#178d50);
    background: linear-gradient(top right, #223031, #178d50);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
   }

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="parallax"></div>

<h1 id="h1"><strong>Title Here</strong></h1>
<div id="back1"></div>

<p id="p1"> Duis platea risus dapibus convallis et dis luctus netus purus. Vel sed vulputate sollicitudin ac praesent imperdiet. Massa primis luctus conubia Curabitur ac. Molestie justo praesent at dolor taciti feugiat. Orci Pretium iaculis. Vehicula magnis proin. Dictumst habitant Adipiscing augue vivamus eget.
</p>
 <div id="back2"></div>

<div class="backgroundimg"></div>



<script src="index.js"></script>
</body>
</html>

任何事情都值得赞赏。谢谢（：

Answer 1

这是#h1。您已设置width: 100%，然后绝对定位。删除宽度。无论如何你根本不需要它。

我网页右侧的额外滚动空间

1 个答案: