How to solve cross border height and margin issue

See more:

CSS3

HTML5

responsive

how i can solve the height and margin issue in cross- browser in following simple css. in internet explorer and Firefox the height of div elements are greater then specified as per screen size also margin between header to other div elements or footer to other element is uneven . **or any website reference form where i understand issue and find solution ** . thanks in advance

What I have tried:

@media screen and (max-width: 480px) 
{

  html ,body  
{
width : 100% ;
height :100% ;
font-size : 1rem ;
}

.header ,.footer
{
display : table-row;
background : white ;
height : 10% ;
width : 100% ;
overflow : auto ;
} 
.left
{
display : table-row;
background : red ;
height : 26.66666666666667%;
width : 100% ;
overflow : auto;

}
 .center
{
display : table-row;
background :blue ;
height : 26.66666666666667%;
width : 100% ;
overflow :auto ;
}
.right
{
display : table-row;
background : gray ;
height : 26.66666666666667%;
width : 100% ;
overflow : auto ; 

}

}