title: Centering the container of divs
body: <p>I'm trying to center container of divs (gray boxes) so that A=B. This equality should be preserved during resizing of the browser windows. Also, when the window is smaller then the width of current number of divs in a row, div arrangement should change to less number of columns.</p>
  
  <p>I was trying to find some code, but no luck. Hope that someone could help.</p>
  
  <p><img src="https://i.stack.imgur.com/w07Kf.jpg" alt="enter image description here"></p>
  
  <p>And this is the code I have for now</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="Area"&gt;
      &lt;div id="container"&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
          &lt;div class="square"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#Area {
      padding: 30px 50px; /* top and bottom 25px, left and right 50px */
  }
  
  #container{
      width: 90%;
      margin: 0 auto;
  }
  
  .square {
      display: inline-block;
     margin: 7 auto;
     width: 350px;
     height: 200px;
     background-color: gray;
     border: 1px black solid;
  }
  </code></pre>
  
  <p>UPDATE.</p>
  
  <p>After Shai's help, I've come up to a new problem. Divs are now stacked liked this:</p>
  
  <p><img src="https://i.stack.imgur.com/zJrY6.png" alt="enter image description here"></p>
  
  <p>But I would like to have them like this:</p>
  
  <p><img src="https://i.stack.imgur.com/kmfHR.jpg" alt="enter image description here"></p>