HTM/CSS - スティッキングフッタが中央に配置されていません

Question

私は、粘着性のあるフッターを無駄にすることを試みています。これは私が試したものです：

HTML：

<div class="footer-be"> 
     <div class="footer-be-middle"> 
      <eGov:EgovReusableContentControl runat="server" id="menuContent" ReusableContentListItemTitle="MasterPage_FooterMenus"/> 
     </div>        
    </div> 

CSS：私は、カスタマイズ（社内）のテーマでのSharePoint 2013を使用しています

.footer-be { 
     position: fixed; 
     bottom: 0; 
     width: 100%; 
     z-index: 9999; 
     background-color: white !important; 
     font-family: "Calibri"; 
    } 

    .footer-be-middle 
    { 
     text-align: center; 
     height: 100%; 
     overflow: hidden; 
     width: 60%; 
     margin: 0 auto; 


    } 

。ユーザーがスクロールするたびにフッターを底に貼り付ける必要があるため、フッター部分を修正する必要がありました（削除する必要があります）。

私は間違っていますか？

Answer 1

まず、100％幅の場合、フッターに余白があるのはなぜですか？
私は余白を取り除くので、ページの最下部に100％幅の要素があります。
第2に、中央揃ったdivに自動水平マージンを与えたいと思うでしょう。 HTML：

<div class="footer-be"> 
    <div class="footer-be-middle"> 
    <eGov:EgovReusableContentControl runat="server" id="menuContent" ReusableContentListItemTitle="MasterPage_FooterMenus"/> 
    </div>        
</div> 

CSS：

.footer-be { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    z-index: 9999; 
    height: 80px; 
    background-color: red !important; 
    font-family: "Calibri"; 
} 

.footer-be-middle 
{ 
    width: 50%; 
    margin: 0 auto; 

    text-align: center; 
    height: 100%; 
    overflow: hidden; 
    background-color: green; 
} 

フィドル：余白を削除 https://jsfiddle.net/2zr7gr7z/