html - 所有内容右侧不需要的空格

Question

我有一个正在使用 css 和 html 的网站，不知何故我的内容旁边有大量空白，只有当您向右滚动时才会出现。有什么方法可以减少网站的查看区域或 View 宽度吗？

我试过在 css 的 width 命令中减小 view-width 但这会删除空白，我试过使用 width: 20 % 并对其进行调整，但这也不起作用。

这是我的 body 元素的代码

* {
   margin: 0%;
   padding: 0%;
   box-sizing: border-box;
}
body {
   font-family: Poppins, sans-serif;
   color: black;


}

这是网站的链接 https://mentalwelfare.000webhostapp.com/我认为问题出现在较小的屏幕上，我使用的是 13.3 英寸 (2560 x 1600) 屏幕的 MacBook pro，所以也许更大的屏幕不会有问题。

我希望能够删除内容右侧不需要的空白。

Answer 1

问题是由于 css 属性 right: -670px; .

#q {
    ............
    right: -670px;
    top: -299px;
}

如果您尝试使用 <p> I'm bipolar, but I'm not crazy and I never was. I'm stark raving sane.” </p>作为图像标题，然后将其放在 div 中的 img .

<div class="cover-image">
    <img src="/img/cover-page.jpg" alt="cover-page">
    <p id="q">“I'm bipolar, but I'm not crazy and I never was. I'm stark raving sane.”</p>
</div>

然后你就可以避免使用这个 CSS 属性

#q {
    position: relative;
    right: -670px;
    top: -299px;
}