title: centering responsive matrix on the page
body: <p>My objective is to vertically center the following responsive matrix, so that both on the left and right will be the same distance to the edge of the screen (parent has a width of 100%). Could you please help? Thank you. My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;image matrix&lt;/title&gt;
      &lt;style&gt;
          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;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- this program illustrates responsive design without the use of media queries --&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
          &lt;div class="cell"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>