Как сделать одинаковый размер со всеми браузерами

Question

Я сделал веб-приложение, которое работает правильно на Google Chrome.Когда я пытаюсь запустить на Microsoft Edge, он не работает правильно.Коробки имеют разную высоту и ширину в Microsoft Edge.Вы можете проверить изображения и мой код CSS ниже.Как я могу сделать это правильно для всех веб-браузеров?

Google Chrome Microsoft Edge

 html, body { margin: 0; height: 100%;   background-color: black;} 
    .grid-container * { }
    .grid-container div:after 
    {  
      content: ''; color: #888; 
      display: flex; justify-content: center; 
      align-items: center; height: 100%; font-family: arial;
        background-color: #2A2A2A;
    }
    .grid-container 
    {   padding:5px;
        height:100%;
        width:1890px;
        display: grid;    
        grid-template-columns: 0.5fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr 1.25fr; 
       grid-template-rows: 0.25fr 1fr 1fr 1fr 1fr;  grid-gap: 10px 10px;
       background-color: black;  
       grid-template-areas: 
           'Header Header Header Header Header Header Header' 
           'Menu Box1 Box1 Box2 Box2 Box3 Box4' 'Menu Box5 Box5 Box6 Box6 Box6 Box7' 
           'Menu Box5 Box5 Box6 Box6 Box6 Box8' 'Menu Box9 Box10 Box11 Box12 Box13 Box14'
           ;}
    .btn-group button {
        background-color: #1F1F1F; /* Green background */
        border: 1px solid black; /* Green border */
        color: white; /* White text */
        padding: 10px 20px; /* Some padding */
        cursor: pointer; /* Pointer/hand icon */
    }
    img {
        border-radius: 4px;
        width: 100px;
       }
    .btn-group:after {
        content: "";
        clear: both;
        display: table;
    }
    .btn-group button:not(:last-child) {
        border-right: none; /* Prevent double borders */
    }

    .btn-group button:hover {
        background-color: #335280;
    }
    .btn-group button:focus {
        background-color: #335280;
    }

    .Header { grid-area: Header; }
    .Menu { grid-area: Menu; 
         height:0px;
    }
    .Box1 { grid-area: Box1;}
    .Box2 { grid-area: Box2;

      }
    .Box3 { grid-area: Box3;
            }
    .Box4 { 
         background: #2a2a2a;
        grid-area: Box4;
    }
    .Box5 { grid-area: Box5; 
         height:0px;
              width:0px;
    }
    .Box6 { grid-area: Box6; 

    }
    .Box7 { grid-area: Box7; }
    .Box8 { grid-area: Box8; }
    .Box9 { grid-area: Box9; }
    .Box10 { grid-area: Box10; }
    .Box11 { grid-area: Box11; }
    .Box12 { grid-area: Box12; }
    .Box13 { grid-area: Box13; }
    .Box14 { grid-area: Box14; }
    #chart {
          height: 100%;       
    }
    .dx-viewport
    {
      background-color: #2A2A2A;
    }
    #gauge {
        height: 100%;
    }
    #gaugeContainer {
        height: 100%;
    }
    .foo {
      float: left;
      width: 0px;
      height: 70px;
      margin: 10px;
      margin-bottom:20px;
    }
    .blue {
      background: #5c5c5c;
    }
    .value {
            margin-left:30px;
            font-size: 45px;
            color: white;
    }
    .value2 {
            margin-left:25px;
            font-size: 17px;
            color: #5c5c5c;
    }
    .value3{
            margin-left:30px;
            margin-top:12px;
            font-size: 20px;
            color: white;
    }
    .value4 {
            margin-left:25px;
            font-size: 17px;
            color: #5c5c5c;
            margin-bottom:25px;
    }
    .inner-grid {
      display: grid;
      grid-template-columns:1fr ;
      grid-gap: 10px;

    }
    .inner-grid > div {
      padding: 8px;
        margin-top:0px;

    }
    .title{
        font-size: 20px;
        color: white;
    }
    .btn-group2 button {
        background-color: #2A2A2A;
        border: 0px solid green; /* Green border */
        color: white; /* White text */
        padding: 20px; /* Some padding */
        font-size: 30px;
        height:102px;
        cursor: pointer; /* Pointer/hand icon */
        float: left; /* Float the buttons side by side */
    }

    /* Clear floats (clearfix hack) */
    .btn-group2:after {
        content: "";
        clear: both;
        display: table;
    }

    .btn-group2 button:not(:last-child) {
        border-right: none; /* Prevent double borders */
    }

    /* Add a background color on hover */
    .btn-group2 button:hover {
        background-color: #3e8e41;
    }