切换到移动设备时html主体没有全宽

Question

我有一个响应式网页，在PC视图上可以正常工作。问题是当我作为移动设备进行检查时，html仅获得屏幕的3/4。我知道哪个CSS类会引起问题，但是我无法弄清楚原因（特别是因为该类仅影响一个部分），没有它，整个部分都会消失。有谁知道它为什么会发生或如何解决？

进一步的搜索显示，导致该问题的属性是：

.rl-section:before {
    position: absolute;
    content:'';
}

但是，我不知道该怎么做，而不会导致任何崩溃。

代码：

<style type="text/css">
.rl-section {
    position: relative;
    
}
.rl-section:before {
    position: absolute;
    content:'';
}

.rl-diagonal {
    z-index: 1;
    padding: 3em;
}
.rl-diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
}
</style>


<style type="text/css">
    
.lr-section {
    position: relative;

}
.lr-diagonal {
    text-align: center;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.lr-content {
   -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.lr-section:before {
    position: absolute;
    content:'';
}


.lr-diagonal {
    z-index: 1;
    padding: 3em;
}
.lr-diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: -3% 0;
    transform-origin: -3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
} 

    
</style>

<section>
  <div class="first-section" style="padding: 5px 5px 15px; height: 500px;">
      <div class="row">
          <div class="col s6">
            <img src="#">
          </div>
          <div class="col s6">
            <p class="center-align">text</p>
          </div>
      </div>
        
    </div>
    <div class="lr-diagonal lr-section" style="background-color:blue">
      <div class="lr-content">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
    <div class="rl-diagonal rl-section" style="background-color:black;">
    <div class="lr-content">
        <img src="#">
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
      </div>
    </div>
</section>

感谢您的帮助！

Answer 1

我相信我了解您的问题所在，但我可能完全不了解。将overflow-x: hidden添加到您的身体可以解决您的问题吗？

body {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

Answer 2

主体采用8px的边距，这就是为什么它没有采用全宽的原因。.谢谢

body{
    margin: 0px;
   }