title: Centering Divs with responsive browser
body: <p>As Illustrated in the next graphic I have a problem with my responsive code: I have 3 sections called square1, 2 and 3 with a white div inside. text on top of it and an icon with an absolute position. Everything fine from 920px to higher browsing. Now, from 720 to 940 pixels I'm trying to give this 3 elements a 50% of width, to display two on top and 1 at the bottom, but centered. so far is a mess. Could someone explain me what I'm doing wrong? my actual     <a href="https://jsfiddle.net/ombpqhjh/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="section2"&gt;
  
          &lt;div id="centralize2"&gt;
              &lt;div id="square1"&gt;
                  &lt;div id="white1"&gt;
                      &lt;img src="images/hexagon1.png" class="hexagon" /&gt;
                      &lt;h2 class="title1"&gt;Ipsum Dolor Consectetur1&lt;/h2&gt;
                      &lt;h3 class="description2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. &lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div id="square2"&gt;
                  &lt;div id="white1"&gt;
                      &lt;img src="images/hexagon2.png" class="hexagon" /&gt;
                      &lt;h2 class="title1"&gt;Ipsum Dolor Consectetur2&lt;/h2&gt;
                      &lt;h3 class="description2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. &lt;/h3&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div id="square3"&gt;
  
                  &lt;div id="white1"&gt;
                      &lt;img src="images/hexagon3.png" class="hexagon" /&gt;
                      &lt;h2 class="title1"&gt;Ipsum Dolor Consectetur3&lt;/h2&gt;
                      &lt;h3 class="description2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a dolor ac sapien semper maximus vel vel arcu. Praesent venenatis semper ornare. Donec blandit feugiat tellus. &lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!!</p>
  
  <p><a href="https://i.stack.imgur.com/u5OG8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u5OG8.png" alt="browser problem"></a></p>