annoying space in css grid container. Please explain to me why there is 1 pixel gap showing in gid container?

Question

So we had this question in our course to make this layout simple grid layout

So i simply made a "top top" "left right" "bottom bottom" area template and assigned the child divs to these.

however as i put a border on the container i notices a wierd gap at the start or sometimes at the end. I ended up using outline to make that reference layout but i want to know the reason behind the gap.

        .grid-container {
      max-width: 960px;
      height: 400px;
      margin: auto;
      /* grid layout */
      display: grid;
      grid-template-areas:
        'top top'
        'left right'
        'bottom bottom';
      grid-template-rows: 1fr 1fr 16.67%;
      grid-template-columns: 1fr 2fr;
      border: solid 2px black;
      box-sizing:border-box;
    }
    
    .item1 {
      grid-area: top;
      width: auto;
      background-color: #00adee;
    }
    .item2 {
      grid-area: left;
      background-color: #d2232b;
    }
    .item3 {
      grid-area: right;
      background-color: #3dad48;
    }
    .item4 {
      grid-area: bottom;
      background-color: #fff100;
    }

<div class="grid-container">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
            <div class="item4"></div>
          </div>