Removing white space between two sections
<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>