Issue with grid responsivity

.all {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 20% 80%;
      grid-template-columns: 20% 80%;
  gap: 1em;
}

.left-side {
  width: 320px;
  height: 869px;
  -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
          box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  margin-right: 72px;
}

.left-side .menu {
  padding-top: 51px;
  padding-left: 26px;
}

.left-side .menu h6 {
  height: 12px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.6px;
  color: #9fa7bb;
  text-transform: uppercase;
}

.left-side .menu-items {
  list-style: none;
  margin-top: 16px;
}

.left-side .menu-items span {
  height: 31px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.47;
  letter-spacing: normal;
  color: #242b39;
  margin-left: 16px;
}

.left-side .menu-items li {
  margin-top: 10px;
  padding: 10px;
}

.left-side .menu-items li:hover {
  border-radius: 8px;
  background-color: #f1f4f8;
  margin-right: 10px;
  margin-left: -18px;
}

.left-side .menu-items img {
  -o-object-fit: contain;
     object-fit: contain;
}

.right-side h2 {
  margin-top: 56px;
  width: 556px;
  height: 37px;
  font-family: "Inter", sans-serif;
  font-size: 31px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.37px;
  color: #000000;
}

.right-side .options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 40px;
}

.right-side .add button {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  background-color: #407cff;
  border-style: none;
  color: white;
  font-size: 22px;
  text-align: center;
}
/*# sourceMappingURL=style.css.map */

   <section class="all">
    <section class="left-side">
        <section class="menu">
            <h6>Site Admin</h6>
            <ul class="menu-items">
                <li><img src="./images/online.png" class="icons"><span>Customer Overview</span></li>
                <li><img src="./images/list-dot.png" class="icons"><span>Reports</span></li>
                <li><img src="./images/file-add.png" class="icons"><span>File transcodings</span></li>
                <li><img src="./images/notification.png" class="icons"><span>Notification center</span></li>
            </ul>
        </section>
    </section>

    <section class="right-side">
        <h2>Customer Overview</h2>

        <section class="options">
            <div class="search">
                <input type="text" placeholder="Customer or ID">
            </div>

            <div class="add">
                <button>+</button>
            </div>
            
        </section>
    </section>
    </section>