title: Removing white space between two sections
body: <p><a href="https://i.stack.imgur.com/jsMlJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jsMlJ.png" alt="enter image description here"></a></p>
  
  <p>I have two sections as such:</p>
  
  <pre><code>&lt;section id="achievements"&gt; ... &lt;/section&gt;
  &lt;section id="services"&gt; ... &lt;/section&gt;
  </code></pre>
  
  <p>There is a white space coming in between them. While this is not so for the rest of my sections.</p>
  
  <p>I have not set any display property for the sections, but it is inheriting the display property of block from a css file. (on checking from developer tool in Chrome)</p>
  
  <p>I also checked the contents of both the sections if anything is coming out the sections for some reason. This does not seem to be the case.</p>
  
  <p>What is causing this white space and how can I remove it?</p>
  
  <p>PS: Let me know if I should add more information. </p>
  
  <p>PS2: The posts I have checked out on this site talk about removing whitespace from <code>inline-block</code> elements.</p>
  
  <p><strong>Update</strong></p>
  
  <p>Here is the <a href="https://jsfiddle.net/amit1235813/t9LazuLs/5/" rel="nofollow noreferrer">Fiddle</a> of the relevant part:</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>/* main */
  
  body {
    font-family: "Montserrat", sans-serif;
    margin: 0px;
    padding: 0px;
  }
  .upper {
    text-transform: uppercase;
  }
  /* Positioning */
  
  .vertically_centered {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  /* For tagline sections in 5 articles */
  
  .tagline {
    height: 305px;
    padding: 0;
    margin: 0;
  }
  .tagline_text {
    margin: auto;
    text-align: center;
  }
  .tagline_sub {
    font-size: 18px;
    color: #999999;
  }
  .bottom_line:after {
    content: "";
    display: block;
    width: 60px;
    border-bottom: 3px solid #b3b3b3;
    margin: 30px auto 40px;
  }
  /* row 4: achievements */
  
  #achievements,
  #achievements article {
    height: 320px;
    margin: 0px;
    padding: 0px;
  }
  #experiments {
    background-color: #1a1a1a;
    width: 33.33%;
    height: 320px;
  }
  #awards {
    background-color: #212121;
    width: 33.33%;
    height: 320px;
  }
  #messages {
    background-color: #262626;
    width: 33.33%;
    height: 320px;
  }
  .results {
    margin: auto;
    height: 35%;
    width: 75%;
    text-align: center;
  }
  .data_set {
    width: 70%;
  }
  .number {
    font-size: 42px;
    color: white;
  }
  .details {
    font-size: 16px;
    color: #cccccc;
  }
  .first_icon_set {
    max-width: 30%;
    height: auto;
  }
  /* row 5: services */
  
  #services {
    background-color: #e6e6e6;
    height: 1005px;
    margin: 0px;
    padding: 0px;
  }
  #services_details {
    height: 700px;
    width: 100%;
  }
  .services_box {
    background-color: white;
    width: 32%;
    height: 330px;
    margin: 20px 0.66% 0% 0.66%;
    text-align: center;
  }
  .services_box p {
    padding: 0 15px 0 20px;
  }
  .icon_set_services {
    width: 60%;
  }
  #services_details_sub {
    margin-top: 25px;
    font-size: 14px;
    color: #999999;
    line-height: 25px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class=""&gt;
    &lt;!-- row 4: achievements --&gt;
    &lt;section class="" id="achievements"&gt;
      &lt;article id="experiments" class="left"&gt;
        &lt;section class="results vertically_centered"&gt;
          &lt;img src="icons/flask.svg" alt="enigma_flask_icon" class="first_icon_set left"&gt;&lt;/img&gt;
          &lt;div class="data_set upper left"&gt;
            &lt;p class="number"&gt;1200&lt;/p&gt;
            &lt;p class="details"&gt;design experiments&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/article&gt;
      &lt;article id="awards" class="left"&gt;
        &lt;section class="results vertically_centered"&gt;
          &lt;img src="icons/trophy.svg" alt="enigma_trophy_icon" class="first_icon_set left"&gt;&lt;/img&gt;
          &lt;div class="data_set upper left"&gt;
            &lt;p class="number"&gt;578&lt;/p&gt;
            &lt;p class="details"&gt;awards won&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/article&gt;
      &lt;article id="messages" class="left"&gt;
        &lt;section class="results vertically_centered"&gt;
          &lt;img src="icons/envelope.svg" alt="enigma_trophy_icon" class="first_icon_set left"&gt;&lt;/img&gt;
          &lt;div class="data_set upper left"&gt;
            &lt;p class="number"&gt;12489&lt;/p&gt;
            &lt;p class="details"&gt;messages sent&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/article&gt;
    &lt;/section&gt;
  
    &lt;!-- Remove white space from top--&gt;
    &lt;!-- row 5: services --&gt;
    &lt;section id="services"&gt;
      &lt;article class="tagline"&gt;
        &lt;section class="tagline_text vertically_centered"&gt;
          &lt;h2 class="upper bottom_line"&gt;Our services&lt;/h2&gt;
          &lt;p class="tagline_sub"&gt;Continuously Creating Daring Digital Solutions&lt;/p&gt;
        &lt;/section&gt;
      &lt;/article&gt;
      &lt;article id="services_details"&gt;
        &lt;section class="services_box left"&gt;
          &lt;div class="vertically_centered"&gt;
            &lt;img src="icons/star.svg" alt="enigma_star_icon" class="icon_set_services"&gt;&lt;/img&gt;
            &lt;h4 class="upper"&gt;Great design&lt;/h4&gt;
            &lt;p id="services_details_sub"&gt;Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="services_box left"&gt;
          &lt;div class="vertically_centered"&gt;
            &lt;img src="icons/files.svg" alt="enigma_files_icon" class="icon_set_services"&gt;&lt;/img&gt;
            &lt;h4 class="upper"&gt;Perfect coding&lt;/h4&gt;
            &lt;p id="services_details_sub"&gt;Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="services_box left"&gt;
          &lt;div class="vertically_centered"&gt;
            &lt;img src="icons/graph.svg" alt="enigma_graph_icon" class="icon_set_services"&gt;&lt;/img&gt;
            &lt;h4 class="upper"&gt;Marketing&lt;/h4&gt;
            &lt;p id="services_details_sub"&gt;Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="services_box left"&gt;
          &lt;div class="vertically_centered"&gt;
            &lt;img src="icons/face.svg" alt="enigma_face_icon" class="icon_set_services"&gt;&lt;/img&gt;
            &lt;h4 class="upper"&gt;Support&lt;/h4&gt;
            &lt;p id="services_details_sub"&gt;Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="services_box left"&gt;
          &lt;div class="vertically_centered"&gt;
            &lt;img src="icons/gear.svg" alt="enigma_gear_icon" class="icon_set_services"&gt;&lt;/img&gt;
            &lt;h4 class="upper"&gt;Development&lt;/h4&gt;
            &lt;p id="services_details_sub"&gt;Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="services_box left"&gt;
          &lt;div class="vertically_centered"&gt;
            &lt;img src="icons/screen.svg" alt="enigma_screen_icon" class="icon_set_services"&gt;&lt;/img&gt;
            &lt;h4 class="upper"&gt;Web design&lt;/h4&gt;
            &lt;p id="services_details_sub"&gt;Our web design team will spend time with our digital marketing team to ensure the core principles of effective websites.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/article&gt;
    &lt;/section&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>