title: Remove margin between divs
body: <p>This question seems to have been answered a million times, and it seems to work a million times too. Not for me though. I would like to push together all the divs in</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mainprogress {
    height: 60px;
    border: 2px solid black;
  }
  
  .mainprogress div {
    padding: 0;
    margin: 0;
    display: inline-block;
  }
  
  .detailprogress div {
    height: 100%;
  }
  
  .detailprogress .done {
    background-color: lightgreen;
  }
  
  .detailprogress .donelate {
    background-color: lightpink;
  }
  
  .detailprogress .late {
    background-color: red;
  }
  
  .detailprogress .todo {
    background-color: green
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div class="mainprogress"&gt;
      &lt;div class="detailprogress" style="height:100%;width:18%"&gt;
        &lt;div class="done" style="width:58%"&gt;&lt;/div&gt;
        &lt;div class="late" style="width:41%"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="detailprogress" style="height:35%;width:81%"&gt;
        &lt;div class="done" style="width:73%"&gt;&lt;/div&gt;
        &lt;div class="todo" style="width:26%"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://jsfiddle.net/uhBW2/5/" rel="nofollow noreferrer">Fiddle here</a></p>
  <p>when fiddling enough with negative margins, it seems to start working at some point, but it feels terribly hackish. How do I get the elements to align to each other?</p>