Я пытаюсь добавить разделитель границы между верхней и нижней частями. Чтобы подчеркнуть это, я аннотировал изображение ниже, чтобы продемонстрировать это красной линией.
Пока я действительно борюсь с этим. Мне удалось показать белую линию. К сожалению, я не могу добиться, чтобы он составлял 100% контейнера .footer-border, оставляя отступы с обеих сторон, как показано на красной линии. Каждый раз, когда я пытаюсь использовать 100% в контейнере, он ломается и уходит с правой стороны страницы, как видно по текущей белой линии.
<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-2 footer-top-four">
<h4>Resources</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_resourses',
'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-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 = "container">
<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>
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 {
&: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;
&: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;
&: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;
}
Прочитав ваше очень простое предложение, я спросил себя, почему я этого не сделал. Я считал, что пробовал это в первую очередь, и у меня не получилось поместить его в контейнер. Я буквально только что вернулся, и мне удалось это реализовать. Понятия не имею, почему я решил все усложнить.






Вы можете попробовать это
footer{
width:100%;
overflow:hidden;
display:inline-block;
border:1px solid #000000;
}
.container{
margin: 20px;
}
.footer-border{
height:100px;
position:relative;
}
.footer-border:after{
position :absolute;
left:0;
right:0;
bottom:0;
content:"";
height:1px;
width:100%;
background-color:#ff0000;
}
.footer-border:before{
position :absolute;
left:0;
right:0;
top:0;
content:"";
height:1px;
width:100%;
background-color:#ff0000;
}<footer>
<div class = "container">
<div class = "footer-border">
</div>
</div>
</footer>
почему вы не можете использовать border-top или border-bottom?