How can I make these child containers have less space in between when they wrap?

Here's how my child divs look and I'm trying to make them have less space in between when they wrap

I think the problem is in the media query

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 10px;
  width: 100%;
}

html,
body {
  margin: 0;
  height: 100%;
  width: 100%;
  /* added the line above remove if erros */
}

.container-2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: red;
  align-items: center;
}

.item {
  margin: 2% 1%;
  width: 95%;
  height: 12%;
  background-color: yellow;
  border: solid black;
  border-radius: 1% 1%;
}


/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {
  .container-1 img {
    width: 50%;
    height: 100%;
  }
  .container-2 {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .item {
    margin: 2% 1%;
    width: 25%;
    height: 12%;
    background-color: yellow;
    border: solid black;
    border-radius: 1% 1%;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="./css/menu.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Menu | Andy's House</title>
</head>

<body>


  <div class="container-2">

    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>
    <div class="item">

    </div>




  </div>


  </div>

</body>

</html>

I want to make them have less space between them. If anyone knows how to, it would be greatly appreciated! P.S: If you couldn't tell, I am a noob. So, I am sorry :(

Solution

The problem wasn’t the media query. I would change the container height to auto. Like this:

.container-2 {
display: flex;
flex-direction: column;

width: 100%;
height: auto;
background-color: red;
align-items: center;
}