title: Remove gap between columns in flex layout
body: <p>I'm having some trouble with a flexbox layout. What I'm trying to achieve is how the image below is positioned. However, using margin and padding I can move the elements to the correct place without something drastic happening.</p>
  
  <p>I am probably approaching this incorrectly. If someone could give me some advice and an explanation on how to do this correctly that would be great. </p>
  
  <p><strong><em>Wireframe</em></strong></p>
  
  <p><a href="https://i.stack.imgur.com/RS9yX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RS9yX.png" alt="enter image description here"></a></p>
  
  <p><strong><em>How it is right now</em></strong></p>
  
  <p><a href="https://i.stack.imgur.com/ECctn.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ECctn.jpg" alt="enter image description here"></a></p>
  
  <p><strong><em>HTML</em></strong></p>
  
  <pre><code>&lt;div style="background: grey;"&gt;
      &lt;div class="parent-container" style="flex-direction: column; align-items: center; margin: 10px;"&gt;
          &lt;div class="aelia-text child33"&gt;
              The first of it's kind, to&lt;br/&gt;
              create a better customer&lt;br/&gt;
              journey with reduced&lt;br/&gt;
              collection waiting time and&lt;br/&gt;
              a special moment that makes&lt;br/&gt;
              even the most jet-lagged&lt;br/&gt;
              shopper smile.
          &lt;/div&gt;
          &lt;div class="child33"&gt;
              &lt;div class="img-wrapper" ng-style="{'background-image':'url(/assets/Aelia_Robot_highres006.jpg)'}"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="child33"&gt;
              &lt;div class="img-wrapper" ng-style="{'background-image':'url(/assets/AELIA_IMAGE.jpg)'}"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong><em>CSS</em></strong></p>
  
  <pre><code>.aelia-text {
      background: white;
      color: black;
      font-size: 1.5vw;
      font-family: portland-medium-font; 
      -ms-flex-pack: center; 
      justify-content: center;
      -ms-flex-align: center;
      align-items: center;
      display: -ms-flexbox;
      display: flex;
  }
  
  .child33 {
      position: relative;
      -ms-flex-positive: 1;
      flex-grow: 1;
      height: 50%;
      width: 33.3%;
      max-width: calc(100% * (1/3));
      margin: 0;
      position: relative;
      -ms-flex-flow: nowrap row;
      -o-flex-flow: nowrap row;
      flex-flow: nowrap row;
      border: 0;
      outline: 0;
  }
  
  .parent-container {
      display: -ms-flexbox;
      display: flex;
      font-size: 0;
      margin: 0;
      padding: 0;
      border: 0;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      height: 92vh;
      width: 100vw;
  }
  
  .img-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-size: cover;
  }
  </code></pre>