ウーコムのフッターがフルスクリーンに一致しない

Question

私は最近、私の最初のwoocommerceサイトを開発しましたが、私は修正しようとしているいくつかの問題を抱えていました。

サイト自体はhttp://www.dcsreceivers.co.uk/で閲覧できます。

私が現在持っている問題は、背後にある背景が異なる画面サイズで端から端まで表示されないため、フッターバーにあることです。これを私のラップトップ（画面サイズ13）で開発したとき、これは問題ありませんでしたが、これを大きな画面で見た場合、右側にギャップが残っていて、どのように修正するのかが分かりません。

このために使用されるコードは次のとおりです。私はすべての画面サイズで正しく表示したいと誰かがこれを修正する方法について助言することができれば

#colophon .site-info { 
    background-color: #2c2c2c; 
    margin-left: -500px; 
    padding-left: 500px; 
    margin-right: -46px; 
    padding-right: 500px; 
    border-top: 1px solid #3A3A3A; 
} 

はそれをお願い申し上げます。

ありがとうございます。

画像は、次の2つの可能性を持っている問題に

Answer 1

を表示するように取り付けられています。あなたは、にフッターにあなたの黒いバーを持つようにしたいことがあります。画面の幅に合わせて拡大

• 。
• コンテンツの幅に合わせて、画面の幅ではなく、の幅に合わせます。

最初の目的を達成するために、あなたは、そのコンテナの外クラスcol-fullとのdivを.site-info DIV を置くことができます。この場合、コードは次のようになります。この場合

<footer id="colophon" class="site-footer" ...> 
    <div class="col-full"> 
     ... 
    </div> 
    <div class="site-info"> 
     ... 
    </div> 
</footer> 

を、しかし、あなたはそれに応じてコンテンツの位置を調整する.site-info DIVのパディングを設定する必要があります。第二の目的を達成するために、

、あなたは単にマージンを削除することができます

#colophon .site-info { 
    background-color: #2c2c2c; 
    padding-left: 500px; 
    padding-right: 500px; 
    border-top: 1px solid #3A3A3A; 
} 

Answer 2

position: absolute; 
left: 0; 
right: 0; 

は余白を削除します。