右侧有多余空间

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内删除站点徽标的min-width: 400px;，并width:80%删除无效的输入值。

按如下所示更改CSS：

  

.logo {       左边距：50％；       转换：translateX（-50％）;       最小宽度：自动！重要}

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

应该是这样的

  

.footer，footer {padding-top：20rem; margin-bottom：0rem; }