title: How to remove space between div elements?
body: <p>I have two div elements and I want to remove the space between them, which is filled with the background color at the moment. <a href="https://i.stack.imgur.com/YDmRX.png" rel="nofollow noreferrer">This is what it looks like</a>. I want to remove the space between the green section and where the background image ends for the first div element. Here is the HTML for the page:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body style="background-color: #c5ffff"&gt;
      &lt;div class="main-search hero-image"&gt;
          &lt;a href="{{ url_for('logout') }}" class="logout-button"&gt;Log Out&lt;/a&gt;
          &lt;div class="welcome-text"&gt;
              &lt;div class="title"&gt;Welcome to Ripple.&lt;/div&gt;
              &lt;div class="content"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam commodi doloremque esse itaque iusto, labore laborum maxime odio, quidem quos, repellat rerum? Ab, asperiores aspernatur assumenda atque distinctio dolor dolore eveniet facilis, id illo ipsa ipsam minus nemo nobis porro quam quia quibusdam quis ratione rerum soluta suscipit temporibus vel vitae voluptate. Accusamus dignissimos ea esse expedita itaque mollitia nobis, numquam odio, quaerat qui vel voluptatibus?&lt;/div&gt;
                  &lt;a href="{{ url_for('search_location') }}"&gt;&lt;button class="search_button" &gt;Search for a location&lt;/button&gt;&lt;/a&gt;
                  &lt;button class="search_button"&gt;Search for a song&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="main-left"&gt;
              &lt;div class="title"&gt;Collections Near Me&lt;/div&gt;
          &lt;div&gt;
       &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.main-left {
      vertical-align: top;
      margin-top: 0;
      margin-left: 0;
      position: relative;
      background-color: #85dcba;
      text-align: left;
      width: 100%;
      float: top;
      left: 50%;
      transform: translate(-50%);
  }
  
  .main-search {
      vertical-align: top;
      background-color: #d2fdff;
      text-align: left;
      margin: 0;
      padding-top: 2em;
      position: relative;
      top: 0;
      width: 100%;
      left: 50%;
      transform: translate(-50%);
  }
  
  .hero-image {
      background-image: url("main_background.jpg");
      background-size: cover;
      background-repeat: no-repeat;
  }
  
  .title {
      color: black;
      font-family: Roboto, sans-serif;
      font-size: 3em;
      margin-top: 0.5em;
      margin-left: 10px;
      margin-bottom: 0.5em;
  }
  
  .content {
      color: black;
      font-family: Roboto, sans-serif;
      font-size: 1em;
      margin: 1em;
  }
  
  .welcome-text {
      top: 5%;
      left: 5%;
      max-width: 35%;
  }
  </code></pre>