title: Center <div> inside a <div>
body: <p>Code: <a href="https://jsfiddle.net/z4udfg3o/" rel="nofollow noreferrer">https://jsfiddle.net/z4udfg3o/</a></p>
  
  <p>I want the divs "caixa" to be centered in the div "produtos". I was able to do it with exact values using <code>margin-left</code>. But I want it to be responsive for other screen sizes so I putted <code>margin-left</code> and <code>margin-right</code> as <code>auto</code>.</p>
  
  <p>Image of desired format:</p>
  
  <p><img src="https://i.imgur.com/kQMZ1Kj.png" alt=""></p>