title: Containers and divs in CSS
body: <p>Good day,
  I'm not new to CSS or DIVs but have been out of touch for long enough. Trying to work out with Containers and nested DIVs but not getting much success in doing what I'm trying to do. Have already searched enough on SO and Goog but, hopefully you can help me.</p>
  
  <p>Here's the representation of what I wish to achieve.</p>
  
  <p><a href="https://i.stack.imgur.com/pxYpc.jpg" rel="nofollow noreferrer">Screenshot of the layout</a></p>
  
  <p>And here is what I have done so far ..</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>.dealsglobal {
      width: 45%;
      display: inline-block;
      float: left;
      margin-right:20px;
      height: auto;
      overflow: auto;
  }
  
  .dealsglobal h2 {
      margin-left: 10px;
  }
  
  .dealsindia {
      width: 45%;
      height: auto;
      overflow: auto;
  }
  
  .dealsindia h2 {
      margin-left: 10px;
  }
  
  .dealsleft {
      margin: 0px 25px 10px 0px;
      padding: 5px;
      border: 1px solid #ccc;
      height: auto;
      position: relative;
      width: 40%;
      float: left;
      display: inline-block;
      overflow: auto;
  }
  
  .dealsleft img {
      border: 1px solid #ddd;
      background: #fff;
      border-radius: 4px;
      margin-left: auto;
      margin-right: auto;
      width: 100px;
  }
  
  .dealsright {
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #ccc;
      height: auto;
      position: relative;
      width: 40%;
      display: inline-block;
      overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="dealsglobal"&gt;
  &lt;h2&gt;Global Coupons&lt;/h2&gt;
      &lt;div class="dealsleft"&gt;
   &lt;img src="thumb-heavengifts.jpg" alt="HeavenGifts.com Web Store" align="middle" /&gt;
      &lt;/div&gt;
      &lt;div class="dealsright"&gt;
      Test
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="dealsindia"&gt;
  &lt;h2&gt;Indian Coupons&lt;/h2&gt;
      &lt;div class="dealsleft"&gt;
      Test
      &lt;/div&gt;
      &lt;div class="dealsright"&gt;
   Test
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The image just wont center, no matter what I do. I believe, somewhere I have set the property to align left or something. Can anyone please point me to the correct direction? Thanks for your help!</p>