CSS padding-bottom not working
<p>I'm currently trying to add some simple padding to the bottom of my testimonial element, so that it doesn't end right after the text.</p>

<p>It seems that no matter what value I enter in padding or padding-bottom, the bottom padding expands a set amount. I'm wondering how to fix this so it displays padding that is specific to the value I set.</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>/****
GENERAL
****/

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: black;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 120px;
}

li {
    list-style: none;
    
}

a, a:visited {
    text-decoration: none;
    color: black;
    cursor: pointer;
}

a:hover {
    color: #009999;
}

.divide {
    width: 75%;
    border: 1px solid grey;
    margin: 20px auto;
    
}

/****
NAVIGATION
****/

.navigation {
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1000;
}

.navigation li {
    display: inline-block;
    padding: 5px;
}

.navigation li a {
    padding: 8px 10px;
    display: block;
}

.submenu {
    position: relative
}

.sub-hover {
    position: absolute;
    width: 106.42px;
    display: none;
}

.sub-hover a {
    font-size: 1em;
}

.submenu:hover ~ .sub-hover,
.sub-hover:hover {
    display: block;
    background-color: rgba(38, 12, 12, 0.04);
    border-bottom-left-radius: 5%;
    border-bottom-right-radius: 5%;
}

/****
LOGO
****/

.circle {
    border: 1px solid gray;
    border-radius: 100%;
    height: 90px;
    width: 90px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    clear: both;
}

/****
IMAGE SLIDER
****/

.main-gallery {
    background-color: rgba(38, 12, 12, 0.03);
    border-radius: 5px;
    height: 450px;
    clear: both;
    margin-bottom: 25px;
}

/****
TESTIMONIAL
****/

.testimonial {
    clear: both;
    display: block;
    margin: 10px 0;
    padding: 0 5%;
    background-color: rgba(50, 173, 140, 0.82);
}

/****
SOCIAL
****/

.insta {
    height: 50px;
    width: 90%;
    background-color: blue;
    margin: 10px auto;
}



/****
FOOTER
****/

.footer {
    background-color: grey;
    height: 100px;
    clear: both;
    bottom: 0;
    position: absolute;
}

.footer p {
    text-align: center;
    padding: 20px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;link type="text/css" rel="stylesheet" href="css/normalize.css"&gt;
    &lt;link type="text/css" rel="stylesheet" href="css/skeleton.css"&gt;
    &lt;link type="text/css" rel="stylesheet" href="css/main.css"&gt;
  &lt;/head&gt;

  &lt;body&gt;
  
          &lt;ul class="navigation six columns offset-by-three"&gt;
              &lt;li&gt;&lt;a href="#" style="color: #009999"&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="portfolio.html" class="submenu"&gt;PORTFOLIO&lt;/a&gt;
                  &lt;div class="sub-hover"&gt;
                    &lt;a href="portfolio/photo.html"&gt;Photos&lt;/a&gt;
                    &lt;a href="portfolio/physical.html"&gt;Physical&lt;/a&gt;
                    &lt;a href="portfolio/write.html"&gt;Write&lt;/a&gt;
                    &lt;a href="portfolio/studies.html"&gt;Studies&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="about.html"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      
      &lt;div id="logo"&gt;
        &lt;div class="circle"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    
    &lt;div class="main-gallery eleven columns offset-by-half"&gt;
          &lt;div id="main-images"&gt;
            &lt;img src=""/&gt;
            &lt;img src=""/&gt;
            &lt;img src=""/&gt;
            &lt;img src=""/&gt;
          &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;div class="testimonial"&gt;
        &lt;div class="test-text"&gt;          
            &lt;p&gt;&lt;b&gt;Joe Blogs&lt;/b&gt;&lt;/p&gt;
            &lt;p&gt;Distinguished Person&lt;/p&gt;
            &lt;p&gt;&lt;i&gt;"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et orci sit amet nibh aliquam auctor eu eget turpis. Quisque quis leo lacus. Etiam vitae magna eu arcu gravida tincidunt. Ut consectetur mi id enim."&lt;/i&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
      
    &lt;div class="divide"&gt;&lt;/div&gt;
      
    &lt;div class="insta"&gt;
        
        
    &lt;/div&gt;
      
    &lt;div class="footer twelve columns"&gt;
        &lt;p&gt;Jacob Riman Design&lt;/p&gt;
      
    &lt;/div&gt;
    
  &lt;/body&gt;
  
&lt;/html&gt;</code></pre>
</div>
</div>
</p>