issue with flexbox & padding - html

Question

Currently i have what you see in the image below. container 100% browser width. left column has a 100% image. second column has 4 div's controlled with flexbox with 100% images.
http://s10.postimg.org/tlh1nq5zd/sample_1.jpg
the desired effect is what you see below
http://s21.postimg.org/kn82otopz/sample_2.jpg
the padding of div 'items', are making it drop in rows. My CSS might be wrong since I am new to flexbox, But I was under the impression that flexbox could take into consideration the padding/margin of child elements. ( I'm using a 900x528 image just in case anybody is wondering)
#homepage img {
width: 100%;
height: auto;
}
#homepage .wrap {
overflow: hidden;
padding-right: 2%;
padding-left: 2%;
padding-top: 20px;
padding-bottom: 20px;
max-width: 1200px;
margin: auto;
}
#homepage .big {
float: left;
width: calc(50% - 10px);
}
#homepage .small {
float: right;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: calc(50% - 10px);
}
#homepage .small .item {
width: 50%;
}
#homepage .small .uno {
padding: 0px 10px 10px 0px;
}
#homepage .small .dos {
padding: 0px 0px 10px 10px;
}
#homepage .small .tres {
padding: 10px 10px 0px 0px;
}
#homepage .small .dos {
padding: 0px 0px 10px 10px;
}
#homepage .small .cuatro {
padding: 10px 0px 0px 10px;
}
<div id="homepage">
<div class="wrap">
<div class="big">
<img src="images/magnus.jpg" />
</div>
<div class="small">
<div class="item uno">
<img src="images/magnus.jpg" />
</div>
<div class="item dos">
<img src="images/magnus.jpg" />
</div>
<div class="item tres">
<img src="images/magnus.jpg" />
</div>
<div class="item cuatro">
<img src="images/magnus.jpg" />
</div>
</div>
</div>
</div>

Answer 1

Write down the code like
#homepage img {
width: 100%;
height: auto;
}
#homepage .wrap {
overflow: hidden;
padding-right: 2%;
padding-left: 2%;
padding-top: 20px;
padding-bottom: 20px;
max-width: 1200px;
margin: auto;
}
#homepage .big {
float: left;
width: calc(50% - 10px);
}
#homepage .small {
float: right;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: calc(50% - 10px);
}
#homepage .small .item {
width: 50%;
display: inline-flex;
}
#homepage .small .uno {
padding: 0;
}
#homepage .small .dos {
padding: 0;
}
#homepage .small .tres {
padding: 0;
}
#homepage .small .dos {
padding: 0;
}
#homepage .small .cuatro {
padding: 0;
}
<div id="homepage">
<div class="wrap">
<div class="big">
<img src="images/magnus.jpg" />
</div>
<div class="small">
<div class="item uno">
<img src="images/magnus.jpg" />
</div>
<div class="item dos">
<img src="images/magnus.jpg" />
</div>
<div class="item tres">
<img src="images/magnus.jpg" />
</div>
<div class="item cuatro">
<img src="images/magnus.jpg" />
</div>
</div>
</div>
</div>