title: CSS Grid Won't Fill Screen
body: <p>I know this is not a new issue, but no matter what I do, I can't get my grid to fill the screen. The page, which is very short,  is at <a href="http://www.hymntime.com/tch/non/lang-idx-chooser.htm" rel="nofollow noreferrer">http://www.hymntime.com/tch/non/lang-idx-chooser.htm</a>.
  Here are the grid specs:</p>
  
  <pre><code>#page-group {
      display: grid;
      grid-template-columns: min-content auto;
      grid-template-rows:  auto 1fr;
      column-gap: 1em;
      width: 100%;
      height: 100%;
      grid-auto-rows: auto;
  }
  #page-group-navigation {
      grid-column-start   : 1; 
      grid-column-end : 2; 
      grid-row-start  : 1; 
      grid-row-end    : 3; 
      background-color    : aliceblue;
      overflow        : scroll;
  }
  .page-group-header {
      grid-column-start   : 2; 
      grid-column-end : 3; 
      grid-row-start  : 1; 
      grid-row-end    : 2; 
      background-color    : aliceblue;
      margin-right        : 2em;
      text-align      : center;
  }
  #page-group-content {
      grid-column-start   : 2; 
      grid-column-end : 3; 
      grid-row-start  : 2; 
      grid-row-end    : 3; 
      margin-right        : 2em;
  }
  </code></pre>
  
  <p>Firefox, Chrome (desktop &amp; Android) &amp; Edge all leave padding, even though the layout inspectors showing margins &amp; padding to be zero.</p>
  
  <p>Do page's scroll bars make it impossible to achieve full screen?</p>