页面右侧的空白区域

Question

我的网页右侧有不必要的可用空间问题。这是我的网页：

我添加了这些代码

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

它解决了我的问题但是，它禁用了网页上的页脚图标，所以我该怎么做？

这是网页：

webpage url

Answer 1

不要添加此代码，而是需要更正页脚部分中的HTML代码。实际上它看起来像这样

＆＃13;

＆＃13;

<footer id="site-footer" class="footer ">
  <div class="container">
  </div> <!-- issue here !!-->
  <div class="row" itemscope="" itemtype="http://schema.org/Organization">
    <div class="contacts">
      <div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
        <div class="contacts-item">

        </div>
      </div>
    </div>
  </div>
</footer>

＆＃13;

＆＃13;

＆＃13;

您已严重关闭容器的div，应在行 div之后关闭它。这就是为什么你有空格的原因，因为行类增加了由容器纠正的负边距。

Answer 2

它的一个因素导致了这个边际。要找出你可以设置1px红色的所有元素轮廓边框，然后修复它。

*{
 outline: 1px solid red;
}

Answer 3

HTML footer > container结束标记中的错误

编辑了另一个错误

//1: header mistake - Position  
//the problem is position: relative in header media query on the theme-styles.css

   .header @media (max-width: 768px){
     /* position: relative; */ /*remove this*/
        animation: none !important;
        padding: 0px 0;
    }

//2: footer mistake - container closing tag
    <footer id="site-footer" class="footer ">
       <div class="container">
            //container closed here
       </div>//remove this close tag
           <div class="row>"---</div>
           <div class="sub-footer large">---</div>

      </div>//container close here
   </footer>