Q:

Removing padding/margin consistently in multiple wraps

I’m trying to get the light green to be disappeared (not gone but underneath the dark green). 
It’s the exact same problem as my previous post (Remove padding/margin between elements in shrink-to-fit container) but the only thing that’s different is the wrap is inside another wrap, and none of the zero margins/paddings, display inline-blocks or overflows work.

#footer-left{
 float:left;
 width:700px;
 height:200px;
 background:#CC3;
}
#footer-services-contents-wrap{
 background:#030;
 width:auto;
 height:auto;
 display:inline-block;
}
#footer-services-title-wrap{
 background:#0F0;
 width:auto;
 height:auto;
 display:inline-block;
}
.footer-wrap-left{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0;
 border:none;
 float:left;
}
ul.footer {
    list-style-type:none;
    padding: 0px;
 color:#666;
 font-weight:100;
 font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
 font-size:20px;
 margin: 10px 0 0 0;
}

.footer-wrap-right{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0 0 0 50px;
 border:none;
 float:left;
}
<div id="footer-left">

<div id="footer-services-title-wrap">
<div id="footer-services-contents-wrap">

<div class="footer-wrap-left">
<f1>text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

<div class="footer-wrap-right">
<f1>more text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

</div>
</div>

</div>

A:

You don't need float:left when using inline-block in your footer-wrap-right and footer-wrap-left classes:

#footer-left{
 float:left;
 width:700px;
 height:200px;
 background:#CC3;
}
#footer-services-contents-wrap{
 background:#030;
 width:auto;
 height:auto;
 display:inline-block;
}
#footer-services-title-wrap{
 background:#0F0;
 width:auto;
 height:auto;
 display:inline-block;
}
.footer-wrap-left{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0;
 border:none;
}
ul.footer {
    list-style-type:none;
    padding: 0px;
 color:#666;
 font-weight:100;
 font-family:verdana,arial,"Times New Roman", Times, serif,georgia,serif,helvetica;
 font-size:20px;
 margin: 10px 0 0 0;
}

.footer-wrap-right{
 width:auto;
 height:auto;
 display: inline-block;
 border-left:1px solid #ccc;
 padding-left:50px;
 padding:0 0 0 50px;
 border:none;
}
<div id="footer-left">

<div id="footer-services-title-wrap">
<div id="footer-services-contents-wrap">

<div class="footer-wrap-left">
<f1>text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

<div class="footer-wrap-right">
<f1>more text goes here</f1>
<ul class="footer">
  <li>text text</li>
  <li>text text</li>
  <li>text text</li>
</ul>
</div>

</div>
</div>

</div>

