title: Weird gap in the rightmost side in grid layout
body: <p>This is the photo</p>
  <p><a href="https://i.stack.imgur.com/pPKNU.png" rel="nofollow noreferrer">The picture of the problem</a></p>
  <p>I have this CSS code here</p>
  <pre><code>        .container{
              display: grid;
              grid-template-columns: 20% 45% 20%;
              grid-column-gap: 5%;
              border: 1px solid black;
          }
          .left{
              border: 2px solid red;
              height: 300px;
          }
          .middle{
              border: 2px solid blue;
              height: 300px;
          }
          .right{
              border: 2px solid green;
              height: 300px;
          }
  </code></pre>
  <p>As you can see in the rightmost side of the photo, there's some weird gap there. I want it so that there will be no gap in there like in the leftmost side. How do I remove the gap?</p>
  <p>I should also ask this here since I'm new at this CSS.</p>
  <p>How should I better write my code.</p>
  <p>How to also select multiple classes so I don't have to repeat the height at the 3 classes.</p>