title: Why is "justify-content: space-between" not working even after I have put the code in the container?
body: <p>I am trying to implement felx-<a href="https://i.stack.imgur.com/NFhW6.png" rel="nofollow noreferrer">the image of the site</a>box, but the justify-content:space between property is not working in the  container, I even tried to use borders, but that too is not creating any changes to the boxes. What am I doing wrong, could not figure out. Any help or suggestions will be appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
      background-color: gold;
  }
  *{
      margin: 0;
      padding:0;
  }
  
  .img{
      margin-top:50px;
      margin-bottom:50px;
      margin-right:0;
      margin-left:0;
      height:500px;
      width:1350px;
      }
  
   ul{
      list-style-type:none;
      margin: 0;
      padding: 0;
      background-color: black; 
      overflow: hidden;
     
  }
  
  li{
      float: left;
  }
  
  li a {
      display: block;
      padding: 18px 20px;
    
      text-decoration: none;
      color:white;
      font-weight: bolder;
      text-align: center;
  }  
  
   li a:hover {
      background-color: blueviolet;
  }
  
  .active {
      background-color: #04AA6D;
    }
  
   .sb{
        margin:10px;
        padding:7px;
        text-align: left;
        position: absolute;
        right: 220px;
        padding-left:50px;
     }
  
    .button{
      position:absolute;
      right:100px;
      margin:10px;
      padding-left:15px;
      padding-right:15px;
      padding-bottom:6px;
      padding-top:8px;
      border-radius:3px;
      font-weight:bolder;
      color:white;
      background-color: #04AA6D;
  
    }
  
    .button:hover {
      background-color: darkorchid;
    }
  
    .box{
        display:flex;
        flex-flow: row wrap;
        justify-content: space-between;
        font-weight: bolder;
        font-size: 120%;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
    }
  
    .one{
          flex-grow: 1;
          background-color: orange;
          margin-top:20px;
          align-items: center;
          padding: 50px;
          border:white;
      }
    .two{
      flex-grow: 2;
      background-color: rgb(252, 95, 95);
      margin-top:20px;
      align-items: center;
      padding: 50px;
      border:black;
     
  
    }
  
    .three{
      flex-grow: 1;
      background-color:orangered;
      margin-top:20px;
      align-items: center;
      padding: 40px;
      
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Prototype&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
         &lt;div class="image"&gt;
          &lt;img class="img" src="Love music.jpg"&gt;
  
         &lt;/div&gt;
  
          &lt;ul&gt;
              &lt;li&gt;&lt;a class="active" href="#Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a  href="#Test"&gt;Trending&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a  href="#Click"&gt;Your-playlist&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a  href="#Test"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="log" href="#login"&gt;Login&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="sgp" href="#Signup"&gt;Signup&lt;/a&gt;&lt;/li&gt;
            &lt;form&gt;&lt;input class="sb" type="text" placeholder="Searchbar"&gt;&lt;/form&gt;
            &lt;button  class="button" type="button"&gt;Search&lt;/button&gt; 
              
          &lt;/ul&gt;
  
          &lt;div class="box"&gt;
              &lt;div class="one"&gt;One&lt;/div&gt;
              &lt;div class="two"&gt;Two&lt;/div&gt;
              &lt;div class="three"&gt;Three&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="box"&gt;
              &lt;div class="one"&gt;One&lt;/div&gt;
              &lt;div class="two"&gt;Two&lt;/div&gt;
              &lt;div class="three"&gt;Three&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div class="box"&gt;
              &lt;div class="one"&gt;One&lt;/div&gt;
              &lt;div class="two"&gt;Two&lt;/div&gt;
              &lt;div class="three"&gt;Three&lt;/div&gt;
            &lt;/div&gt;   
      
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>