Как решить проблему трансграничной высоты и маржи

---

как я могу решить проблему высоты и маржи в кросс-браузере, следуя простому css. в internet explorer и Firefox высота элементов div больше, чем указано в соответствии с размером экрана, а также разница между заголовком и другими элементами div или Нижним колонтитулом и другим элементом неравномерна . **или любая справочная форма веб-сайта, где я понимаю проблему и нахожу решение **. заранее спасибо

Что я уже пробовал:

@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 ; 

}

}

---