FullPage.js: issues in div positioning

Question

I'm using FullPage.js ( for the official documentation here ) I need to have in a slide (a #section , as called in the .js ) 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, display: block, float, display: flex; but I don't completely succeeded. The best is with flex-box, the only problem in that case is that it doesn't work with safari and android browser. Any one can give me some help? thanks!!

UPDATE

actually the best results are with:

<div class="section" id="section2">
      <header class="header" >
          <h1>HEADER</h1>     
      </header>
  <div class="content">
            <div class="contentflex"id="up">
                <div class="flex-item" id="box1">  
                </div>                
                <div class="flex-item" id="box2">
                </div>             
            </div>

            <div class="contentflex" id="down">
                    <div class="flex-item" id="box3">
                    </div>    
                    <div class="flex-item" id="box4">
                    </div>
            </div>       
  </div>
</div>

css:

.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;
}

Answer 1

Use position:absolute for the boxes and relative for the sections and slides.

Example online

.section,
.slide{
    position:relative;
}
.box{
    position: absolute;
    width:50%;
    height: 50%;
}
#box1{
    background: blue;
    top: 0;
    left: 0;
}
#box2{
    background: green;
    top:0;
    right:0;
}
#box3{
    background: pink;
    bottom:0;
    left:0;
}
#box4{
    background: orange;
    bottom:0;
    right:0;
}

With this HTML markup:

<div id="fullpage">
    <div class="section">
        <div class="box" id="box1"></div>
        <div class="box" id="box2"></div>
        <div class="box" id="box3"></div>
        <div class="box" id="box4"></div>
    </div>
</div>