Improve footer layout

_includes/base/footer.html

@@ -1,17 +1,20 @@
 <!-- Footer -->
-<footer id="scripted-footer" class="footer bg-light">
-  <div class="container">
+<footer id="scripted-footer" class="footer p-3 bg-light">
+  <div class="container-fluid">
     <div class="row">
-      <div class="col-lg-6 h-100 text-center text-lg-left my-auto">
-        <ul class="list-inline mb-2">
+      <div class="col-3">
+        <p class="text-muted small">&copy; {{ site.time | date: '%Y' }} Microsoft</p>
+      </div>
+      <div class="col-9 text-right">
+        <ul class="list-inline">
           {% for link in site.data.navigation %}
             <li class="list-inline-item">
               <a href={{ link.url | absolute_url }}>{{ link.text }}</a>
             </li>
           {% endfor %}
         </ul>
-        <p class="text-muted small mb-4 mb-lg-0">&copy; {{ site.time | date: '%Y' }} Microsoft</p>
       </div>
+
     </div>
   </div>
 </footer>

_layouts/page.html

@@ -2,29 +2,31 @@
 layout: default
 ---
 
-<div class="row">
-  {% comment %} Only for large displays, appears behind scripted-sidebar to reserve its space {% endcomment %}
-  <div class="docsite-sidebar-placeholder d-none d-md-block col-3"> </div>
+<div class="container-fluid">
+  <div class="row">
+    {% comment %} Only for large displays, appears behind scripted-sidebar to reserve its space {% endcomment %}
+    <div class="docsite-sidebar-placeholder d-none d-md-block col-3"> </div>
 
-  {% comment %} Only for large displays {% endcomment %}
-  <nav id="scripted-sidebar" class="d-none d-md-block docsite-sidebar">
-    {% include base/side_nav.html %}
-  </nav>
+    {% comment %} Only for large displays {% endcomment %}
+    <nav id="scripted-sidebar" class="d-none d-md-block docsite-sidebar">
+      {% include base/side_nav.html %}
+    </nav>
 
-  {% comment %} Used instead for small displays {% endcomment %}
-  <div class="col-1 d-block d-md-none"></div>
+    {% comment %} Used instead for small displays {% endcomment %}
+    <div class="col-1 d-block d-md-none"></div>
 
-  {% comment %} For small displays this takes 10 columns, for large displays 8 columns {% endcomment %}
-  <article role="main" class="col-10 col-md-8 px-4">
-    <div class="pt-3 pb-2 mb-3 border-bottom">
-      <h1>{{ page.title }}</h1>
-      <div class="entry">
-        {{ content }}
+    {% comment %} For small displays this takes 10 columns, for large displays 8 columns {% endcomment %}
+    <article role="main" class="col-10 col-md-8 px-4">
+      <div class="pt-3 pb-2 mb-3 border-bottom">
+        <h1>{{ page.title }}</h1>
+        <div class="entry">
+          {{ content }}
+        </div>
       </div>
-    </div>
-  </article>
+    </article>
 
-  <div class="col-1"></div>
+    <div class="col-1"></div>
+  </div>
 </div>
 
 <script>