كيف أنشئ footer بشكل ديناميكي؟

أقوم ببرمجة موقع باستعمال bootstrap، وأواجه مشكل في جزء footer حيث لا يتأقلم وعرض الشاشة بشكل صحيح، وإليكم الكود:

كود html:

<div class="footer navbar-fixed-bottom">
        <div class="container text-right">
            <div id="socialMedia">
            </div>
        </div>
    </div>

كود ملف التنسيق css:

html {
 height: 100%;
 box-sizing: border-box;
 }

 *,
 *:before,
 *:after {
 box-sizing: inherit;
  }

  body {
  position: relative;
  margin: 0;
  padding:0;
  min-height: 100%;
  margin-bottom:-50px;
     }

   .footer {
   position: absolute;
   right: 0;
   bottom:0;
   left: 0;
   padding:0;
   background-color:#333;
   width:100%;
   height:50px;
   margin-bottom:0px;

}  

ألاحظ أن الشكل العام لجزء من footer لا يظهر بشكل جيد على معظم الأجهزة، فأين يكمن المشكل؟ وما الحل؟