title: Why are grid items not centered?
body: <p>For some reason two input ranges are making the top two items in the grid off centered.</p>
  
  <p>I am assuming this is because of their shadow DOM styling. Is this actually the case?</p>
  
  <p><strong>Does anybody know why the ranges are making items A and B off centered?</strong></p>
  
  <p><strong><a href="https://codepen.io/tOkyO1/pen/QOeKLP" rel="nofollow noreferrer">Here is a codepen.</a></strong></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-css lang-css prettyprint-override"><code>body { margin: 0; background: #0d0d0d; }
  
  #center{width:2px;height:100%;position:absolute;left:calc(50% - 1px);background:red;}
  
  #grid {
    width: 80%;
    height: 30%;
    position: absolute;
    top: 35%;
    left: 10%;
    display: grid;
    grid-template-areas:
      "a a b b"
      "c c c d"
      "e e e f"
      "g g g g"
      ;
    grid-gap: 10px;
    color: #fff;
    box-sizing: border-box;
    border: dotted yellow 1px;
  }
  
  #a, #b { display: flex; justify-content: center; align-items: center; }
  
  #a, #b, #d, #f, #g { background: #1a1a1a; }
  
  #a { grid-area: a; }
  #b { grid-area: b; }
  #c { grid-area: c; }
  #d { grid-area: d; }
  #e { grid-area: e; }
  #f { grid-area: f; }
  #g { grid-area: g; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="center"&gt;&lt;/div&gt;
  &lt;div id="grid"&gt;
    &lt;div id="a"&gt;A&lt;/div&gt;
    &lt;div id="b"&gt;B&lt;/div&gt;
    &lt;input type="range" id="c"&gt;
    &lt;div id="d"&gt;&lt;/div&gt;
    &lt;input type="range" id="e"&gt;
    &lt;div id="f"&gt;&lt;/div&gt;
    &lt;div id="g"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>