所有内容右侧不需要的空格答案

【问题标题】：Unwanted whitespace on the right of all the content所有内容右侧不需要的空格
【发布时间】：2019-09-06 02:52:15
【问题描述】：

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

我尝试在 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 上，所以也许更大的屏幕不会有问题。

我希望能够去掉内容右侧不需要的空格。

【问题讨论】：

这是由于您的<div class="cover-image"> 和<p id="q"> 伸出的长度超过了您的屏幕宽度。您可以将overflow-x: hidden 添加到<main class="main-section"> 或<body> 以截断溢出，但这可能不是您的最佳选择，因为它只治疗症状而不是根本问题。更好的选择可能是使您的网站具有响应性，例如在窗口宽度太窄时隐藏图像或将其包装在单独的行中。见：en.wikipedia.org/wiki/Responsive_web_design
请不要使用 000webhost - 他们以明文形式存储您的密码并且已被多次破坏（暴露了 1300 万客户的密码）。请参阅TroyHunt 和Sophos 关于该问题的报告。
@ObsidianAge 谢谢你告诉我这个，我很快就会切换到不同的虚拟主机。

标签： html css

【解决方案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> 作为图片标题，那么只需将其放在img 的div 中即可。

<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;
}

【讨论】：