Background to a collapsed footer - html

Question

I have some troubles to put a background colour to all the footer when it collapses, There are some blank spaces in the middle of the footer... I have tried this CSS code {background-size: 100% 100%;}
{
height: 317px;
background-color: #3b3b3b;
margin-top: 200px;
padding: 4% 0;
}
.no a {
color: white;
}
footer .container {
height: 317px;
background-color: #3b3b3b;
margin-top: 200px;
width: 1500px;
}
footer ul,
.taber {
margin-top: 100px;
}
.last,
.no {
margin-top: 100px;
}
.last img {
margin-bottom: 34px;
}
footer ul {
margin: 0;
padding: 0 0 0;
}
footer ul li,
.taber {
font-size: 16px;
font-family: Aleo;
color: white;
list-style: none;
margin-bottom: 10px;
font-size: 16px
}
#media (max-width: 723px) {
.taber {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
cursor: auto;
color: yellow;
background-color: #3b3b3b;
background-size: 100% 100%;
}
.taber.collapsed:after {
content: "+";
float: right;
font-size: 22px;
margin-right: 10px;
}
.taber:after {
content: "-";
float: right;
font-size: 22px;
margin-right: 10px;
}
.panel-collapse {
padding-left: 15px;
padding-right: 15px;
}
#collapseOne,
#collapsetwo,
#collapsethree,
#collapsefour {
background-color: #3b3b3b;
}
footer >.container {
padding-left: 0;
padding-right: 0px;
}
<footer>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-2 col-sm-3">
<div data-toggle="collapse" class="taber" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
New York Restaurant
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>3926 Anmoore Road</li>
<li>New York, NY 10014</li>
<li><strong>02.94.23.9.66</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-2">
<div class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapseOne">
France Restaurant
</div>
<div id="collapsetwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>68, rue de la Coronne</li>
<li>75002 PARIS</li>
<li><strong>02.94.23.9.66</strong>
</li>
</ul>
</div>
</div>
<div class="no col-md-2 col-sm-2">
<div id="collapsethree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>Blog
</li>
<li>Careers
</li>
<li>Privacy Policy
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="last">
<img src="img/logo_footer.png" alt="">
</div>
<div id="collapsefour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>© All Rights Reserved 2014.</li>
<li>Find More at <strong>Pixelhint.com</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>

Answer 1

Looks like you might be dealing with collapsing-margin
Below a snippet testing about it with the following rule (one way among others ) :
/* hold margins within containers */
.row>*>* {border:1px transparent solid;}
Snippet updated to run :
#media (max-width: 723px) {
.taber {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
cursor: auto;
color: yellow;
background-color: #3b3b3b;
background-size: 100% 100%;
}
.taber.collapsed:after {
content: "+";
float: right;
font-size: 22px;
margin-right: 10px;
}
.taber:after {
content: "-";
float: right;
font-size: 22px;
margin-right: 10px;
}
.panel-collapse {
padding-left: 15px;
padding-right: 15px;
}
#collapseOne,
#collapsetwo,
#collapsethree,
#collapsefour {
background-color: #3b3b3b;
}
/* hold margins within containers */
.row>*>* {border:1px transparent solid;}
.last img {display:block}/* just to erase the gap it produces here */
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row">
<div class="col-md-2 col-md-offset-2 col-sm-3">
<div data-toggle="collapse" class="taber" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
New York Restaurant
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>3926 Anmoore Road</li>
<li>New York, NY 10014</li>
<li><strong>02.94.23.9.66</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-2 col-sm-2">
<div class="taber" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapseOne">
France Restaurant
</div>
<div id="collapsetwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>68, rue de la Coronne</li>
<li>75002 PARIS</li>
<li><strong>02.94.23.9.66</strong>
</li>
</ul>
</div>
</div>
<div class="no col-md-2 col-sm-2">
<div id="collapsethree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>Blog
</li>
<li>Careers
</li>
<li>Privacy Policy
</li>
<li>Contact
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-3">
<div class="last">
<img src="img/logo_footer.png" alt="">
</div>
<div id="collapsefour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<ul>
<li>© All Rights Reserved 2014.</li>
<li>Find More at <strong>Pixelhint.com</strong>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>