html - 右侧的额外空间

Question

我有一个网站:www.ribbonhill.co.uk我一直在尝试去掉右边的一个空白，出现在手机上。

奇怪的是，它在 Chrome 和 Edge 浏览器上都没有出现在完整模式下，但是当它被调整为小的时候，问题只出现在 Edge 而不是 Chrome 上。

该站点是使用 Django-oscar 构建的，本身没有任何问题。

我试过删除两个 CSS 文件，但没有空白。这两个文件是 ribbonhill.css 和 w3.css。

删除 w3.css 后只有一小块空白，但删除 ribbomhill.css 会留下很大的空间。

我一直在尝试删除一些代码，但很吃力。

我试过了

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

和

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

但仍然没有运气。

更新:在手机和 chrome 上排序，但 edge/internet explorer 显示如下？!我想我会保持原样

Answer 1

我分析了你的网站www.ribbonhill.co.uk .这是一个小的 CSS 不匹配。

1. 在 navbar 中删除用于站点 Logo 的 min-width: 400px; 和 width:80% 它不是一个有效的输入值.

如下更改您的 CSS:

.logo { margin-left: 50%; transform: translateX(-50%); min-width: auto !important; }

1. 为您的 .footer 类移除 padding: 2rem 0 0;。因为它会影响容器填充。

应该是这样的:

.footer, footer {padding-top: 20rem;margin-bottom: 0rem; }