HTM/CSS - Sticky footer not centered

Question

I am trying to center a sticky footer to no avail. This is what I tried:

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;
        background-color: white !important;
        font-family: "Calibri";
    }

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


    }

I am using SharePoint 2013 with a customized (in-house) theme. I had to modify the footer part (remove it) because I need the footer to be stickied to the bottom whenever the user scrolls.

What am I doing wrong?

Answer 1

first of all, why does the footer have margin if it has 100% width?
so i'd get rid of the margins, so now you have a 100% wide element at the very bottom of the page.
Second, you will want to give the centered div an automatic horizontal margin. 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;
}

fiddle: https://jsfiddle.net/2zr7gr7z/