Container 100% responsive

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>

   #box {   width:90%;height:400px;position:absolute;border:1px solid;
               left:5%;background-color:white;      }
   .container { display:flex;width:100%;position:absolute;top:50%;
                     transform:translate(0,-50%);   }
   .div {   width:30%;height:350px;background-color:red;
               color:white;text-align:center;border:0.1vw solid;
                   position:relative;left:4.5%;    }
</style>
</head>
<body>

<div id='box'>
<div class='container'>
<div class='div'>
<h1>Home</h1>
<h1>Home</h1>
<h1>Home</h1>
<h1>Home</h1>
</div>
<div class='div'>
<h1>Home</h1>
<h1>Home</h1>
<h1>Home</h1>
<h1>Home</h1>
</div>
<div class='div'>
<h1>Home</h1>
<h1>Home</h1>
<h1>Home</h1>
<h1>Home</h1>
</div>
</div>
</div>


<script>

</script>
</body>
</html>