Why does that border not covering up its contents

Here I am sharing a pen here I have inserted 6 div.squares inside of div.container I have set .squares css property float:left My doubt is- When I gave a red border to the div.container, that border doesn't cover the 6 divs(instead the border shows up only on the top of the squares)as seen in the pen According to me, that border should cover up all the squares

Click on this link to see the pen

 .square{
      padding-bottom:30%;
      width:30%;
      margin:10px; 
      background-color:brown;
      float:left;
    }
    .container{
      height:100%;
      max-width:600px;
      margin:20px auto;
      border:2px solid red;
      height:auto;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
  </div>

</body>
</html>

Solution

That is because of the float: left

Check out how I did it.

.square{
      padding-bottom:30%;
      width:30%;
      margin:10px; 
      background-color:brown;
    }
    .container{
      height:100%;
      max-width:600px;
      margin:20px auto;
      border:2px solid red;

    }
    .row {
      display: flex;
      flex-wrap: wrap;
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="container">

  <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
  </div>

  <div class="row">
      <div class="square"></div>
      <div class="square"></div>
      <div class="square"></div>
  </div>
   
  </div>

</body>
</html>