如何使用CSS删除小型设备上令人不安的空白？

Question

我有一个静态的html页面，不幸的是，当我运行我的页面并检查响应性时，我看到页面右侧的空白，我在堆栈溢出中遵循了许多解决方案，方法是添加以下代码：

我尝试添加的内联

html, body {
    font: normal 16px sans-serif;
    color: #555;
    box-sizing: border-box; 
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

但这没用。我试图将其添加到我的CSS文件中：

html, body {
  font: normal 16px sans-serif;
  color: #555;
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

也不起作用。这是我正在构建的页面：demo

我的页面出了什么问题？

Answer 1

问题是由于.Navbar元素超出了视口的100％

由于其左偏移量是30px，而不是将width: 100%设置为width: calc(100% - 30px)（或设置为left: 0）并重新排列内部元素的空间/大小

Answer 2

添加位置：css正文中的相对位置和边距中的“！important”请参见下面的代码。

html, body {
  font: normal 16px sans-serif;
  color: #555;
  box-sizing: border-box; 
  margin: 0 !important;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

然后将菜单向右移动一点，使用此更新您的.main-banner设置填充的新值

.main-banner {
    background-image: url(../images/bg.png);
    background-repeat: no-repeat;
    background-size: auto;
    width: 100%;
    height: 100%;
    padding: 20px 65px;