Currently, I am implementing a responsive grid layout that accommodates both mobile and desktop screen sizes. My objective is to split the footer into two rows and insert a line between them that spans the entire width of the screen. However, a challenge arises due to the presence of a container class with max-width: 1700px for desktop sizes. To address this issue, I have introduced a new class called intermediate-line with max-width: none (including initial) in an attempt to override the container's max-width property. Below is the snippet of my code:
/********CSS*******/
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
max-width: 1170px;
}
@media(min-width: 48em){
.container > .intermediate-line{
max-width:none;
border-top: solid 1px;
}
}
/******************/
/*******HTML*******/
<footer class="background-primary">
<div class="container">
<div class="row">
<div class="col-1-4">logo</div>
<div class="col-1-4">address</div>
<div class="col-1-4">Phone Number</div>
<div class="col-1-4">Social Media</div>
</div>
<div class="intermediate-line"></div>
<div class="row">
<div class="col-1-4">copyright</div>
<div>Privacy Policy</div>
<div>Terms of Use</div>
</div>
</div>