title: How can I get two <div>'s closer together?
body: <p><img src="https://i.stack.imgur.com/2xYiA.jpg" alt="enter image description here">See image attached - I want to bring the 'left' and 'right' 's closer together so they remain as close as both are to the header, in blue above.</p>
  
  <p>this is my CSS for both left and right 's ... thank's a lot!</p>
  
  <pre><code>.left {
      float: left;
      position: relative;
      background-color: #DDFF00;
      margin-top: 40px;
      margin-bottom: 10px;
      height: 500px;
      width: 10%;
  }
  
  .right {
      float: right;
      position: relative;
      background-color: #FFE6E6;
      margin-top: 40px;
      margin-bottom: 10px;
      margin-left: 10px;
      height: 500px;
      width: 88%;
  }
  </code></pre>