title: Why does the file add white space when I add an image to my file?
body: <p>I've been working on a website using Bootstrap 4 where there are three images inside a .row div.  The problem I'm having, however, is that I want all the images to have the same height, so I created my own class where I set <code>height: 20%</code> and <code>width: auto</code>  The images look exactly how I want them to, however, for each image a certain amount of pixels are added under that div and it sets a huge gap between the section that has the images and the section that follows it.  I was wondering what would be a way to avoid this from happening since I don't want to keep that gap between both sections.  Here's a fiddle with what I'm talking about <a href="https://jsfiddle.net/wxg51v5x/" rel="nofollow noreferrer">https://jsfiddle.net/wxg51v5x/</a>  (Comment out the images to see the difference in action).  Thanks!</p>
  
  <p><strong>EDIT:</strong>  Included the code itself.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Illicit Mind Inc. - Programs&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" /&gt;
      &lt;link rel="stylesheet" href="./css/bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="./css/font-awesome.min.css" /&gt;
      &lt;link rel="stylesheet" href="./css/styles.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;!-- Navbar --&gt;
  &lt;nav class="navbar navbar-expand-md fixed-top"&gt;
    &lt;a class="navbar-brand" href="./index.html"&gt;&lt;img src="./imgs/logo.png" alt="Illicit Mind Inc."/&gt;&lt;/a&gt;
    &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"&gt;
      &lt;span class="navbar-toggler-icon"&gt;&lt;i class="fas fa-bars"&gt;&lt;/i&gt;&lt;/span&gt;
    &lt;/button&gt;
  
    &lt;div class="collapse navbar-collapse" id="navbar"&gt;
      &lt;ul class="navbar-nav mr-auto"&gt;
        &lt;li class="nav-item active"&gt;
          &lt;a class="nav-link" href="./programs.html"&gt;Programs&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="./about-us.html"&gt;About Us&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class="nav-item"&gt;
          &lt;a class="nav-link" href="./contact-us.html"&gt;Contact Us&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div&gt;
        &lt;ul class="navbar-nav mr-auto"&gt;
          &lt;li class="nav-item"&gt;
            &lt;a class="nav-link" href="./login.html"&gt;Login/Signup&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  &lt;!-- Navbar --&gt;
  
  &lt;!-- Background Image  --&gt;
  &lt;div class="full-height bg-image"&gt;&lt;/div&gt;
  &lt;!-- Background Image --&gt;
  
  &lt;!-- BWNF --&gt;
  &lt;div class="absolute-top" id="bwnf"&gt;
    &lt;div class="d-flex align-items-center justify-content-center full-height full-width"&gt;
      &lt;div class="text-center"&gt;
        &lt;h1 class="text-white font-heavy text-center display-1"&gt;Build With, Not For&lt;/h1&gt;
        &lt;hr class="bg-white main-hr" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- BWNF --&gt;
  
  &lt;!-- Programs --&gt;
  &lt;div class="container-fluid" id="programs"&gt;
    &lt;div class="d-flex align-items-center justify-content-center"&gt;
      &lt;div class="text-center"&gt;
        &lt;div class="logo-buffer"&gt;&lt;/div&gt;
        &lt;div class="logo-buffer"&gt;&lt;/div&gt;
        &lt;h3 class="font-heavy"&gt;Our Great Programs&lt;/h3&gt;
        &lt;br /&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
            &lt;img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" /&gt;
            &lt;br /&gt; &lt;br /&gt;
            &lt;h4&gt;CITE&lt;/h4&gt;
            &lt;p&gt;A professional collective of Caribbeans in the innovation ecosystem.&lt;/p&gt;
            &lt;button class="btn"&gt;Learn More&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" /&gt;
            &lt;br /&gt; &lt;br /&gt;
            &lt;h4&gt;Build With, Not For&lt;/h4&gt;
            &lt;p&gt;A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.&lt;/p&gt;
            &lt;button class="btn"&gt;Register&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;img class="program-logo" src="./imgs/gsd-logo.png" alt="Get Shit Done" /&gt;
            &lt;br /&gt; &lt;br /&gt;
            &lt;h4&gt;Get Shit Done&lt;/h4&gt;
            &lt;p&gt;An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.&lt;/p&gt;
            &lt;button class="btn"&gt;Attend&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Programs --&gt;
  
  &lt;!-- Formula --&gt;
  &lt;div class="container-fluid" id="formula"&gt;
    &lt;div class="d-flex align-items-center justify-content-center"&gt;
      &lt;div class="text-center"&gt;
        &lt;h3 class="font-heavy"&gt;Tribe Secret Formula&lt;/h3&gt;
        &lt;h6&gt;In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.&lt;/h6&gt;
        &lt;br /&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
            &lt;h1 class="lead"&gt;&lt;span class="fas fa-flask fa-4x"&gt;&lt;/span&gt;&lt;/h1&gt;
            &lt;p&gt;Experiences&lt;/p&gt;
            &lt;p&gt;Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;h1 class="lead"&gt;&lt;span class="fas fa-users fa-4x"&gt;&lt;/span&gt;&lt;/h1&gt;
            &lt;p&gt;Connections&lt;/p&gt;
            &lt;p&gt;You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-md-4"&gt;
            &lt;h1 class="lead"&gt;&lt;span class="far fa-lightbulb fa-4x"&gt;&lt;/span&gt;&lt;/h1&gt;
            &lt;p&gt;Knowledge&lt;/p&gt;
            &lt;p&gt;Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Formula --&gt;
  
  &lt;!-- Footer --&gt;
  &lt;footer class="full-width text-center"&gt;
    &lt;div&gt;
      &lt;p&gt;
        &amp;copy; &lt;span id="year"&gt;&lt;/span&gt; Illicit Mind Inc. All Rights Reserved.&lt;br /&gt;
        &lt;a href="https://www.facebook.com/illicitmindinc" class="fab fa-facebook-f" target="_blank"&gt;&lt;/a&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt;
        &lt;a href="https://twitter.com/illicitmindinc" class="fab fa-twitter" target="_blank"&gt;&lt;/a&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt;
        &lt;a href="https://www.instagram.com/illicitmindinc/" class="fab fa-instagram" target="_blank"&gt;&lt;/a&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/footer&gt;
  &lt;!-- Footer --&gt;
  
  &lt;script type="text/javascript" src="./js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./js/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="./js/scripts.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@font-face {
    font-family: 'Futura Book';
    src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
         url('./fonts/futura-book-webfont.woff') format('woff');
    font-style: normal;
  }
  @font-face {
    font-family: 'Futura Heavy';
    src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
         url('./fonts/futura-heavy-webfont.woff') format('woff');
    font-style: bold;
  }
  * {font-family: 'Futura Book', Arial, sans-serif}
  .absolute-top {
    top: 0;
    position: absolute;
  }
  .absolute-bottom {
    bottom: 0;
    position: absolute;
  }
  .logo {
    width: auto;
    height: 15vh;
  }
  .navbar-brand &gt; img {
    width: auto;
    height: 55px;
  }
  .program-logo {
    width: auto;
    height: 20%;
  }
  nav {
    background-color: white;
    box-shadow: 0px 1px 10px 0px #4191B4;
  }
  .bg-image {
    background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
    background-size: cover;
  }
  footer {
    padding-top: 10px;
    line-height: 1.25;
  }
  .login-divider  hr {
    width: 42.5vw;
    margin-left: auto;
    margin-right: auto;
    border: .25px solid rgba(134, 142, 150, .25);
  }
  .main-hr {width: 0}
  .interests {padding-left: 25px}
  .profile-picture {height: 25vh}
  .font-book {font-family: 'Futura Book', Arial, sans-serif}
  .font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
  body {overflow-x: hidden}
  .padding-top {padding-top: 95px}
  .left-hr {float: left}
  .right-hr {float: right}
  .logo-buffer {height: 10px}
  a:hover {text-decoration: none}
  input {text-align: center}
  .fa-bars, a {color: rgba(65, 145, 180, .95)}
  .fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
  .bg-google {background-color: #EA4335}
  .bg-fb {background-color: #3B5998}
  .full-width {width: 100vw}
  .full-height {height: 100vh}
  .card-header {cursor: pointer}
  /* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
  #formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */
  </code></pre>