Fit a grid into a div whatever the number of rows and columns

I am creating a grid inside a container and I want the user to introduce the number of columns and rows. The problem is that the content is not fitting the container, if the user wants a big grid up to 64x64 it overflows the container. How can I make my grid to fit the container whatever the rows and columns? My code:

const container = document.createElement('div');
container.id = 'container';
container.className = 'mx-auto my-2';

document.body.appendChild(container);

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  container.style.border = '3px solid #0000FF'
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "grid-item";
    cell.addEventListener("mouseover", paint);
  };
};

function paint(e) {
  e.target.style.backgroundColor = 'black';
}

let size = 0;
const start = document.getElementById('start');
start.addEventListener('click', function() {
  size = prompt('Please enter the side of the grid(max 64):');
  if (size <= 64) {
    container.innerHTML = '';
    makeRows(size, size);
  } else if (size > 64) {
    alert('You exceeded the limits. Please Try Again:');
  }
});

const reset = document.getElementById('reset');
reset.addEventListener('click', function() {
  container.innerHTML = '';
  makeRows(size, size);
});

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  overflow: hidden;
  height: 450px;
  width: 960px;
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  text-align: center;
  background-color: gray;
}

<body class="bg-secondary">
  <nav class="navbar navbar-dark bg-dark">
    <span class="navbar-brand mb-0 h1">Etch-A-Sketch</span>
  </nav>
  <div class="text-center mt-2">
    <button type="button" class="btn btn-primary btn-lg" id="start">START</button>
    <button type="button" class="btn btn-primary btn-lg" id="reset">RESET</button>
  </div>
  <script src="script.js"></script>
</body>

Solution

simply remove the padding:

const container = document.createElement('div');
container.id = 'container';
container.className = 'mx-auto my-2';

document.body.appendChild(container);

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  container.style.border = '3px solid #0000FF'
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "grid-item";
    cell.addEventListener("mouseover", paint);
  };
};

function paint(e) {
  e.target.style.backgroundColor = 'black';
}

let size = 0;
const start = document.getElementById('start');
start.addEventListener('click', function() {
  size = prompt('Please enter the side of the grid(max 64):');
  if (size <= 64) {
    container.innerHTML = '';
    makeRows(size, size);
  } else if (size > 64) {
    alert('You exceeded the limits. Please Try Again:');
  }
});

const reset = document.getElementById('reset');
reset.addEventListener('click', function() {
  container.innerHTML = '';
  makeRows(size, size);
});

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  overflow: hidden;
  height: 450px;
  width: 960px;
  display: grid;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  text-align: center;
  background-color: gray;
}

<body class="bg-secondary">
  <nav class="navbar navbar-dark bg-dark">
    <span class="navbar-brand mb-0 h1">Etch-A-Sketch</span>
  </nav>
  <div class="text-center mt-2">
    <button type="button" class="btn btn-primary btn-lg" id="start">START</button>
    <button type="button" class="btn btn-primary btn-lg" id="reset">RESET</button>
  </div>
  <script src="script.js"></script>
</body>