updated CSS to include both margin and padding for footer columns (#441)

* updated CSS to include both margin and padding for footer columns

* Updated the out of date browser message for IE

components/byu-footer/byu-footer-common.scss

@@ -16,12 +16,14 @@ $universityFooterLogoMobileWidth: 280px;
 
 $universityFooterVerticalPadding: 21px;
 
-$siteFooterHorizontalPadding: 8px;
+$siteFooterHorizontalMargin: 8px;
 $siteFooterTopPadding: 0;
 $siteFooterBottomPadding: 50px;
-$siteFooterPadding: $siteFooterTopPadding $siteFooterHorizontalPadding $siteFooterBottomPadding $siteFooterHorizontalPadding;
 
-$siteFooterMobilePadding: 16px $siteFooterHorizontalPadding 0;
+$footerHorizontalPadding: 16px;
+
+$footerColumnMargin: 16px $siteFooterHorizontalMargin 0;
+$footerColumnPadding: 0 16px;
 
 $large-siteFooterContentTopMargin: 33px;
 $large-siteFooterContentBottomMargin: 40px;

components/byu-footer/byu-footer.scss

@@ -90,8 +90,8 @@
 
   ::slotted(*) {
     flex-grow: 1;
-    margin: $siteFooterMobilePadding;
-    padding: 0 16px;
+    margin: $footerColumnMargin;
+    padding: $footerColumnPadding;
   }
 
   ::slotted(*:last-child) {
@@ -114,7 +114,7 @@
   }
 }
 
-$calcSubtractWidth: ($siteFooterHorizontalPadding) * 2;
+$calcSubtractWidth: ($siteFooterHorizontalMargin + $footerHorizontalPadding) * 2;
 
 .university-footer {
   font-size: 9px;

components/byu-header/byu-header.js

@@ -134,7 +134,7 @@ class BYUHeader extends HTMLElement {
             container = document.createElement('div');
             container.className = 'menu-ie11-outdated ie11-outdated-hidden';
             container.innerHTML = '<div class="menu-ie11-outdated-label">' +
-                '  You are using an out-dated browser. BYU support for this browser is ending. Please <a href="http://webcommunity.byu.edu/supported-browsers" target="_blank">download a new browser</a>.' +
+                '  You are using an out-dated browser. BYU support for this browser has ended. Please <a href="http://webcommunity.byu.edu/supported-browsers" target="_blank">download a new browser</a>.' +
                 '</div>';
 
             const closeButton = document.createElement('button');