title: How to remove default space when using flex-box?
body: <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>html,body{
    height:100%;
    width:100%;
    }
  #parent-container {
      display: flex;
      width:100%;
      height: 100%;
      /*flex-direction: column;*/
      flex-wrap: wrap;
      /*justify-content:space-between;*/
  }
  
  #rd-box{
     width:100%;
     background-color:rgba(176,39,39,1);
     height: 25%;
  }
  
  #sky-box{
      height: 50%;
      background-color: rgba(0,255,255,1);
  }
  
  #yllw-box{
      height: 25%;
      background-color: rgba(255,242,0,1);
  }
  
  #grn-box{
      height: 37.5%;
      background-color: rgba(0,255,0,1);
  }
  
  #bl-box{
      height: 37.5%;
      background-color: rgba(0,33,87,1);
  }
  
  #item:nth-child(3){
      order: 2;
  }
  
  
  
  /*---common  styles----*/
  
  .wd-half{
      width: 50% ! important;
  }
  
  .item{
      margin:  0px ! important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="pro.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="parent-container"&gt;
              &lt;div id="rd-box" class="item"&gt;  &lt;/div&gt;
              &lt;div id="sky-box" class="item wd-half"&gt; &lt;/div&gt; 
              &lt;div id="grn-box" class="item wd-half"&gt; &lt;/div&gt;
              &lt;div id="yllw-box" class="item wd-half"&gt;&lt;/div&gt;                
              
              &lt;div id="bl-box" class="item wd-half"&gt;  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm new with flex box and that is why I asking this question.In the above code there is a default white space is generated between the green and blue part.how can I avoid that?.How can i fix this?.Is the structure need to be reconstructed?</p>
  
  <p>I'm trying to achieve this</p>
  
  <p><a href="https://i.stack.imgur.com/YYz3G.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YYz3G.jpg" alt="enter image description here"></a></p>