footer section background color issue, the background color may not be extending full-width across the screen, Please extend full-width background color in footer section only

components/footer.js

@@ -8,9 +8,11 @@ class CustomFooter extends HTMLElement {
           color: white;
           padding-top: 3.5rem;
           padding-bottom: 2rem;
-          width: 100vw;
-          margin: 0;
+          width: 100%;
+          margin-left: calc(-50vw + 50%);
+          margin-right: calc(-50vw + 50%);
           left: 0;
+          right: 0;
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;
@@ -97,7 +99,7 @@ class CustomFooter extends HTMLElement {
           text-align: center;
         }
       </style>
-      <footer style="background-image: linear-gradient(rgba(0, 32, 96, 0.9), rgba(0, 32, 96, 0.9)), url('http://static.photos/technology/1200x630/42')">
+      <footer style="background: var(--vlc-navy);">
 <div class="footer-container">
           <div class="footer-grid">
             <div>