Looking for a way to create a border line separator between the top and bottom sections? I've been struggling with this task, but I have managed to make progress by adding a white line. However, I'm facing an issue where the container's width does not cover the entire footer-border section as intended. Whenever I try setting it to 100%, it extends beyond the page's right-hand side. Take a look at the image below to see what I mean:
https://i.sstatic.net/PG28L.png
<footer>
<section class="footer-top">
<div class="container">
<div class="row footer-border">
<div class="col-md-3 footer-top-one">
<a title="Contrast" class="footer-logo" href="<?php echo site_url() ?>"><img src="<?php echo esc_url( get_template_directory_uri() )?>/assets/img/contrast-logo-white-horizontal.svg"></a>
<p>We are a specialist eCommerce digital marketing agency. As our name suggests, we do things differently.</p>
<a target="_blank" href="https://www.facebook.com/contrast.digital/"><i class="fab fa-facebook-f"></i></a>
<a target="_blank" href="https://twitter.com/contrasttalk"><i class="fab fa-twitter"></i></a>
<a target="_blank" href="https://www.linkedin.com/company/contrastuk/"><i class="fab fa-linkedin-in"></i></a>
<a target="_blank" href="https://www.instagram.com/contrast.digital/"><i class="fab fa-instagram"></i></a>
<a target="_blank" href="https://www.youtube.com/channel/UCb4cTmxtsT-Wdcdi4mmsx9Q?view_as=subscriber"><i class="fab fa-youtube"></i></a>
</div>
<div class="col-md-2 footer-top-three">
<h4>Discover</h4>
<nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'footer_discover',
'depth' => 2,
'container' => 'div',
'container_id' => 'footer-top-nav',
'menu_class' => 'nav navbar-nav ml-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
) );
?>
</nav>
</div>
<div class="col-md-2 footer-top-two">
<h4>Derby</h4>
<p>St George Court, Alfreton Rd</p>
<p>Derby</p>
<p>DE21 4AP</p>
<b><a href="tel:+01332300583"><p class="footer-phone-number">01332 300 583</p></a></b>
<b><a href="/contrast/contact/" target="_top"><p>Contact Our Team</p></a></b>
</div>
<div class="col-md-2 footer-top-two">
<h4>Nottingham</h4>
<p>26-30 Stoney St</p>
<p>Nottingham</p>
<p>NG1 1LL</p>
<b><a href="tel:+01332300583"><p class="footer-phone-number">01332 300 583</p></a></b>
<b><a href="/contrast/contact/" target="_top"><p>Contact Our Team</p></a></b>
</div>
<div class="col-md-3 footer-top-five">
<h4>Growth Strategies</h4>
<p>We’ll send you growth strategies you can implement yourself to give your eCommerce business the competitive edge it deserves.</p>
<a class="clear footer-cta" title="Send Me Growth Strategies" href="/contrast/newsletter/"><button>Send Me Growth Strategies</button></a>
</div>
</div>
</div>
</section>
<section class="footer-bottom">
<div class="cotainer">
<div class="row justify-content-between">
<div class="col-lg-auto">
<p>Company Reg No. 11332749</p>
</div>
<div class="col-lg-auto">
<p>Copyright © <?php echo date("Y"); ?> Contrast Digital Ltd</p>
</div>
<div class="col-lg-auto p0">
<nav class="navbar navbar-light bg-lignt navbar-expand-md flex-md-row nav-header" role="navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'footer_privacy',
'depth' => 2,
'container' => 'div',
'container_id' => 'footer-privacy-nav',
'menu_class' => 'nav navbar-nav ml-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker()
) );
?>
</nav>
</div>
</div>
</div>
</section>
</footer>
<!-- CSS Styling -->
footer {
background: $black;
color: $white;
margin: 30px;
margin-top: 30px;
section.footer-top {
padding: 40px 0;
.footer-border::before {
content:'';
position: absolute;
border-bottom: 1px solid $white;
width: 100%;
}
// Other styling properties...
}
section.footer-bottom {
padding: 40px 0;
p {
font-size: 0.667em;
color: $white;
text-align: center;
margin-bottom: 0;
}
}
// More CSS styling...
}