title: How to make space between two divs smaller
body: <p>I have two divs within another div. </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>* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
  }
  
  html,
  body {
    width: 100%
  }
  
  * {
    box-sizing: border-box;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  html,
  body {
    height: 100%;
  }
  
  .content {
    display: table-cell;
    height: 100vh;
  }
  
  #about {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  
  #aboutInfo {
    font-size: 45px;
    overflow: auto;
  }
  
  #aboutImage {
    padding: 0;
    margin: 0;
    max-width: 100%;
    height: auto;
  }
  
  @media screen and (max-width: 768px) {
    #about {
      flex-direction: column;
      height: 100%;
    }
    #about #aboutImage {
      max-width: 100%;
      height: auto;
    }
    #about #aboutInfo {
      max-height: 200px;
      margin: auto;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content" id="about"&gt;
    &lt;div id="aboutImage"&gt;
      &lt;img src="http://via.placeholder.com/350x150"&gt;
    &lt;/div&gt;
    &lt;div id="aboutInfo"&gt;
      &lt;p&gt; A really long text here, multiple lines of sentences &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I make the space between the two divs smaller while also maintaining the responsive elements? I tried adding margin-left: -200px under aboutInfo and this definitely reduced the space between the divs however the image overlapped the other div when the window was resized so that didnt work. Is there a different way to achieve a smaller space?</p>