Is anybody able to assist me in vertically centering the responsive matrix below so that it is equidistant from the left and right edges of the screen (parent element has a width of 100%)? Any help would be greatly appreciated. Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>image matrix</title>
<style>
html, body{margin: 0; width: 100%; height: 100%;}
.container {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cell {
border: 0px solid darkred;
height: 50px;
width: 150px;
margin: 20px;
background-color: #058;
}
</style>
</head>
<body>
<!-- this program illustrates responsive design without the use of media queries -->
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</body>
</html>