title: FullPage.js: issues in div positioning
body: <p>I'm using <code>FullPage.js</code> ( for the official documentation <a href="https://github.com/alvarotrigo/fullPage.js#fullpagejs" rel="nofollow noreferrer">here</a> )
  I need to have in a slide (a <code>#section</code> , as called in the <code>.js</code> )
  4 boxes stacked 2 by 2 that occupy all the slide, with a little margin around the slide (like in the scheme I made). I tried a lot of ways, <code>display: block</code>, <code>float</code>, <code>display: flex</code>; but I don't completely succeeded. The best is with <code>flex-box</code>, the only problem in that case is that it doesn't work with <code>safari</code> and <code>android browser</code>. Any one can give me some help? thanks!!</p>
  
  <p><img src="https://i.stack.imgur.com/Z2AL8.png" alt="here the scheme I made to clarify"></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>actually the best results are with:</p>
  
  <pre><code>&lt;div class="section" id="section2"&gt;
        &lt;header class="header" &gt;
            &lt;h1&gt;HEADER&lt;/h1&gt;     
        &lt;/header&gt;
    &lt;div class="content"&gt;
              &lt;div class="contentflex"id="up"&gt;
                  &lt;div class="flex-item" id="box1"&gt;  
                  &lt;/div&gt;                
                  &lt;div class="flex-item" id="box2"&gt;
                  &lt;/div&gt;             
              &lt;/div&gt;
  
              &lt;div class="contentflex" id="down"&gt;
                      &lt;div class="flex-item" id="box3"&gt;
                      &lt;/div&gt;    
                      &lt;div class="flex-item" id="box4"&gt;
                      &lt;/div&gt;
              &lt;/div&gt;       
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.contentflex{
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    padding-right:1.9em;
    padding-left:2em;
    padding-bottom:0;
    padding-top:0;
    justify-content: center;
    height: 20em
  }
  
  #up, #down{
     position:relative;
  }
  
  .flex-item{
  
              width: 50%;
              padding-right:10%; 
              padding-left:10%;
              padding-top:5%;
              padding-bottom:5%;
  }
  
  .content{
              position: relative;
              top: 50%;
              transform: translateY(-50%);
              text-align: center;
  }
  </code></pre>