title: Why is overflow: hidden not working on my div?
body: <p>If you try to give <code>margin-left</code> to C1 div, it moves and overflow is hidden. But if you try to give <code>margin-left</code> to C2 div, it moves towards right, but overflow is not hidden, rather it moves in next line (behavior of <code>inline-block</code>).</p>
  
  <p>So why is it not working on C2 div? Is there any way to solve this problem?</p>
  
  <p>(Basically I want C1 and C2 div to be placed together and overflow should be hidden if I increase their widths, or if I give them margins).</p>
  
  <p>Here's what I'm trying:</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>.c1 {
    width: 220px;
    height: 200px;
    background-color: #666666;
    display: inline-block;
  }
  .c2 {
    width: 200px;
    height: 220px;
    background-color: #CCCCCC;
    display: inline-block;
  }
  .c3 {
    width: 180px;
    height: 210px;
    background-color: #333333;
    display: block;
  }
  .wrapper {
    background-color: red;
    width: 500px;
    height: 500px;
    display: inline-block;
    overflow: hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;div class="c1"&gt;C1&lt;/div&gt;
    &lt;div class="c2"&gt;C2&lt;/div&gt;
    &lt;div class="c3"&gt;C3&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>