title: How to add a ::after border to div
body: <p>I'm trying to add a border line separator between the top and bottom sections. To highlight this I annotated the img below to demonstrate this with the red line.</p>
  
  <p>So far I've really been struggling with this. I've managed to get the white line to show. Unfortunately I cant get it to be 100% of the .footer-border container leaving the padding either side as seen on the red line. Every time I try to use 100% in the container it breaks it and goes off the right hand side of the page as seen by the current white line.</p>
  
  <p><a href="https://i.stack.imgur.com/PG28L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PG28L.png" alt="enter image description here"></a>    </p>
  
  <pre><code>&lt;footer&gt;
      &lt;section class="footer-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row footer-border"&gt;
  
  
                      &lt;div class="col-md-3 footer-top-one"&gt;
                          &lt;a title="Contrast" class="footer-logo" href="&lt;?php echo site_url() ?&gt;"&gt;&lt;img src="&lt;?php echo esc_url( get_template_directory_uri() )?&gt;/assets/img/contrast-logo-white-horizontal.svg"&gt;&lt;/a&gt;
                          &lt;p&gt;We are a specialist eCommerce digital marketing agency. As our name suggests, we do things differently.&lt;/p&gt;
                          &lt;a target="_blank" href="https://www.facebook.com/contrast.digital/"&gt;&lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a target="_blank" href="https://twitter.com/contrasttalk"&gt;&lt;i class="fab fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a target="_blank" href="https://www.linkedin.com/company/contrastuk/"&gt;&lt;i class="fab fa-linkedin-in"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a target="_blank" href="https://www.instagram.com/contrast.digital/"&gt;&lt;i class="fab fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;a target="_blank" href="https://www.youtube.com/channel/UCb4cTmxtsT-Wdcdi4mmsx9Q?view_as=subscriber"&gt;&lt;i class="fab fa-youtube"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-2 footer-top-three"&gt;
                          &lt;h4&gt;Discover&lt;/h4&gt;
                          &lt;nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation"&gt;       
                          &lt;?php
                          wp_nav_menu( array(
                              'theme_location'    =&gt; 'footer_discover',
                              'depth'             =&gt; 2,
                              'container'         =&gt; 'div',
                              'container_id'      =&gt; 'footer-top-nav',
                              'menu_class'        =&gt; 'nav navbar-nav ml-auto',
                              'fallback_cb'       =&gt; 'WP_Bootstrap_Navwalker::fallback',
                              'walker'            =&gt; new WP_Bootstrap_Navwalker()
                          ) );
                          ?&gt;
                          &lt;/nav&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-2 footer-top-two"&gt;
                          &lt;h4&gt;Derby&lt;/h4&gt;
                          &lt;p&gt;St George Court, Alfreton Rd&lt;/p&gt;
                          &lt;p&gt;Derby&lt;/p&gt;
                          &lt;p&gt;DE21 4AP&lt;/p&gt;
                          &lt;b&gt;&lt;a href="tel:+01332300583"&gt;&lt;p class="footer-phone-number"&gt;01332 300 583&lt;/p&gt;&lt;/a&gt;&lt;/b&gt;
                          &lt;b&gt;&lt;a href="/contrast/contact/" target="_top"&gt;&lt;p&gt;Contact Our Team&lt;/p&gt;&lt;/a&gt;&lt;/b&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-2 footer-top-two"&gt;
                          &lt;h4&gt;Nottingham&lt;/h4&gt;
                          &lt;p&gt;26-30 Stoney St&lt;/p&gt;
                          &lt;p&gt;Nottingham&lt;/p&gt;
                          &lt;p&gt;NG1 1LL&lt;/p&gt;
                          &lt;b&gt;&lt;a href="tel:+01332300583"&gt;&lt;p class="footer-phone-number"&gt;01332 300 583&lt;/p&gt;&lt;/a&gt;&lt;/b&gt;
                          &lt;b&gt;&lt;a href="/contrast/contact/" target="_top"&gt;&lt;p&gt;Contact Our Team&lt;/p&gt;&lt;/a&gt;&lt;/b&gt;
                      &lt;/div&gt;
  
                      &lt;!-- &lt;div class="col-md-2 footer-top-four"&gt;
                          &lt;h4&gt;Resources&lt;/h4&gt;
                          &lt;nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation"&gt;
                          &lt;?php
                          wp_nav_menu( array(
                              'theme_location'    =&gt; 'footer_resourses',
                              'depth'             =&gt; 2,
                              'container'         =&gt; 'div',
                              'container_id'      =&gt; 'footer-top-nav',
                              'menu_class'        =&gt; 'nav navbar-nav ml-auto',
                              'fallback_cb'       =&gt; 'WP_Bootstrap_Navwalker::fallback',
                              'walker'            =&gt; new WP_Bootstrap_Navwalker()
                          ) );
                          ?&gt;
                          &lt;/nav&gt;
                      &lt;/div&gt; --&gt;
  
                      &lt;div class="col-md-3 footer-top-five"&gt;
                          &lt;h4&gt;Growth Strategies&lt;/h4&gt;
                          &lt;p&gt;We’ll send you growth strategies you can implement yourself to give your eCommerce business the competitive edge it deserves.&lt;/p&gt;
                          &lt;a class="clear footer-cta" title="Send Me Growth Strategies" href="/contrast/newsletter/"&gt;&lt;button&gt;Send Me Growth Strategies&lt;/button&gt;&lt;/a&gt;
                      &lt;/div&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;section class="footer-bottom"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row justify-content-between"&gt;
                  &lt;div class="col-lg-auto"&gt;
                    &lt;p&gt;Company Reg No. 11332749&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-auto"&gt;
                    &lt;p&gt;Copyright &amp;copy; &lt;?php echo date("Y"); ?&gt; Contrast Digital Ltd&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-auto p0"&gt;
                      &lt;nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation"&gt;
                      &lt;?php
                      wp_nav_menu( array(
                          'theme_location'    =&gt; 'footer_privacy',
                          'depth'             =&gt; 2,
                          'container'         =&gt; 'div',
                          'container_id'      =&gt; 'footer-privacy-nav',
                          'menu_class'        =&gt; 'nav navbar-nav ml-auto',
                          'fallback_cb'       =&gt; 'WP_Bootstrap_Navwalker::fallback',
                          'walker'            =&gt; new WP_Bootstrap_Navwalker()
                      ) );
                      ?&gt;
                      &lt;/nav&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/footer&gt;
  
      footer {
  
      background: $black;
      margin: 30px;
      color: $white;
      margin-top: 30px;
  
      section.footer-top {
  
          padding: 40px 0;
  
          .footer-border::before {
              content:'';
              position: absolute;
              border-bottom: 1px solid $white;
              width: 100%;
          }
  
          p {
              font-size: 0.762em;
          }
  
          .footer-logo img {
              width: 170px;
              margin-bottom: 10px;
          }
  
          h4 {
              margin-top: 0;
          }
  
          .footer-top-one p {
              margin-bottom: 20px;
          }
  
          a i.fab {
              padding-right: 10px;
              color: $white;
          }
  
          .footer-top-two {
  
              b {
                  font-weight: 400;
              }
  
              a { 
  
                  &amp;:hover {
                      color: $white;
                  }
                  p { 
                      color: $white;
                  }
              }
  
              .footer-phone-number {
                  margin-top: 20px;
              }
  
              p {
                  margin-bottom: 0;
              }
          }
  
          ul#menu-footer-discover-menu, ul#menu-footer-resources-menu {
  
              margin-top: 0;
              display: inline;
  
              a.nav-link {
                  color: $white;
                  font-size: 0.762em;
                  padding: 0;
              }
          }
  
          a.clear.footer-cta {
  
              margin-left: 0;
  
              button {
  
                  padding: 10px 31px;
                  color: $white;
                  font-size: 0.714em;
                  background-color: Transparent;
                  background-repeat: no-repeat;
                  border: solid $white 1px;
                  cursor: pointer;
                  overflow: hidden;
                  outline: none;
  
                  &amp;:hover {
                      background-color: $white;
                      border: solid 1px $white;
                      color: $black;
                  }
              }
          }
  
      }
  
      section.footer-bottom {
  
          padding: 40px 0;
  
          p {
              font-size: 0.667em;
              color: $white;
              text-align: center;
              margin-bottom: 0;
          }
      }
  
      #menu-footer-privacy-menu {
          margin-top: 0px;
      }
  
      #footer-privacy-nav a.nav-link {
          color: $white;
          font-size: 0.667em;
          padding: 0;
      }
  
      #footer-privacy-nav .menu-item {
          position:relative;
          margin-right: 20px;
          &amp;:last-of-type {
              margin-right: 0;
          }
      }
  
      #footer-privacy-nav .menu-item:hover::after, #footer-privacy-nav .menu-item.current-menu-item:after {
          content:'';
          position: absolute;
          width: 110%;
          height: 0;    
          left: -5%;
          right: 5%;
          bottom: -10px;
          border-bottom: 1px solid $white;  
      }
  
      #footer-privacy-nav .menu-item:active::after {
          content:'';
          position: absolute;
          width: 110%;
          height: 0;    
          left: -5%;
          right: 5%;
          bottom: -10px;
          border-bottom: 1px solid $white; 
      }
  }
  
  .footer-bottom:before {
      content:'';
      position: absolute;
      width: auto;
      height: 0;    
      left: 0;
      border-bottom: 1px solid $white;  
  }
  </code></pre>