title: Padding-Top and Padding-Bottom Not Working
body: <p>For some reason padding-top and padding-bottom are not working for my #functions div. </p>
  
  <p>I can't seem to figure out what is canceling out the CSS to cause this, and for some reason padding-left and padding-right work fine.</p>
  
  <p>I want the #functions div to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/VkQM0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VkQM0.png" alt="Intended Design of #Vocational"></a> </p>
  
  <p>Is there something wrong with my HTML or CSS? Am I approaching this the wrong way?</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>* {
    box-sizing: border-box;
  }
  @font-face {
      font-family: 'gilroysemibold';
      src: url('radomir_tinkov_-_gilroy-semibold-webfont.woff2') format('woff2'),
           url('radomir_tinkov_-_gilroy-semibold-webfont.woff') format('woff');
      font-weight: normal;
      font-style: normal;
  }
    .clearfix:after {
    content:" ";
    display:table;
    clear:both;
  }
  body {
    margin: 0px;
  }
  #calltoaction {
    background-image: url("calltoactionbackground.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    height: 500px;
    padding-bottom: 100px;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 100px;
    text-align: center;
    width: 100%;
  }
  #calltoaction p {
    margin: auto;
    padding-top: 25px;
    padding-bottom: 55px;
    width: 500px;
  }
  #functions {
    background-color: #FFFFFF;
    height: 1500px;
    width: 100%;
  }
  #functions p {
    color: #62CE9C;
  }
  h1 {
    color: #FFFFFF;
    font-family: 'gilroysemibold';
    font-size: 36px;
    font-weight: normal;
  }
  h2 {
    color: #62CE9C;
    font-family: 'gilroysemibold';
    font-size: 30px;
    font-weight: normal;
  }
  h3 {
    color: #00AF78;
    font-family: Open Sans;
    font-size: 18px;
    line-height: 10px;
  }
  .hashtag {
    color:  #00AF78;
  }
  #hero {
    background-color: #62CE9C;
    height: 600px;
    float: left;
    margin: 0px;
    padding-bottom: 100px;
    padding-left: 120px;
    padding-right: 120px;
    padding-top: 100px;
    width: 100%;
  }
  #herotext {
    float: left;
  }
  #hero h1 {
    width: 470px;
  }
  #hero img {
    display: block;
    float: right;
  }
  #hero p {
    padding-top: 30px;
    padding-bottom: 40px;
    width: 500px;
  }
  input, select, textarea{
      color: #62CE9C;
  }
  
  textarea:focus, input:focus {
      color: #62CE9C;
  }
  input::-webkit-input-placeholder {
  color: #62CE9C !important;
  }
   
  input:-moz-placeholder { /* Firefox 18- */
  color: #62CE9C !important;  
  }
   
  input::-moz-placeholder {  /* Firefox 19+ */
  color: #62CE9C !important;  
  }
   
  input:-ms-input-placeholder {  
  color: #62CE9C !important;  
  }
  p {
    color: #FFFFFF;
    font-family: Open Sans;
    font-size: 18px;
    line-height: 26px;
  }
  #save {
    float: center;
    margin: auto;
    width: 800px;
  }
  #savefood {
    float: right;
    margin: auto;
  }
  #savefoodimage {
    float: right;
  }
  #savefoodtext {
    float: right;
    height: 300px;
    margin-right: 30px;
    padding-top: 30px;
    width: 290px; 
  }
  #savemoney {
    float: left;
    margin: auto;
  }
  #savemoneyimage {
    float: left;
  }
  #savemoneytext {
    float: left;
    height: 300px;
    margin-left: 30px;
    padding-top: 30px;
    width: 330px;
  }
  #savetime {
    float: left;
    margin: auto;
  }
  #savetimeimage {
    float: left;
  }
  #savetimetext {
    float: left;
    height: 300px;
    margin-left: 30px;
    padding-top: 30px;
    width: 330px;
  }
  #searchbar {
    background-color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    height: 40px;
    padding-left: 15px;
    width: 300px;
  }
  #searchbutton {
    background-color: #28C787;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 18px;
    height: 40px;
    margin-left: 20px;
    width: 180px;
  }
  #searchbutton:hover {
    background-color: #00BE8B;
  }
  #tweetone {
    background-color: #FFFFFF;
    border-radius: 25px;
    height: 208px;
    margin: auto;
    margin-top: 60px;
    padding-bottom: 30px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 30px;
    width: 650px;
  }
  #tweetone img {
    float: left;
    padding-top: 10px;
  }
  #tweetonetext {
    float: left;
    padding-left: 15px;
    width: 450px;
  }
  #tweettwo {
    background-color: #FFFFFF;
    border-radius: 25px;
    height: 208px;
    margin: auto;
    margin-top: 60px;
    padding-bottom: 30px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 30px;
    width: 650px;
  }
  #tweettwo img {
    float: left;
    padding-top: 10px;
  }
  #tweettwotext {
    float: left;
    padding-left: 15px;
    width: 400px;
  }
  #tweetthree {
    background-color: #FFFFFF;
    border-radius: 25px;
    height: 208px;
    margin: auto;
    margin-top: 60px;
    padding-bottom: 30px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 30px;
    width: 650px;
  }
  #tweetthree img {
    float: left;
    padding-top: 10px;
  }
  #tweetthreetext {
    float: left;
    padding-left: 15px;
    width: 450px;
  }
  ul {
    list-style-type: none;
  }
  #vocational {
    background-color: #62CE9C;
    display: inline-block;
    height: 1120px;
    padding-bottom: 100px;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 100px;
    width: 100%;
  }
  #vocational h1 {
    margin: auto;
    text-align: center;
    margin-bottom: 0px;
    width: 500px;
  }
  #vocational p {
    color: #62CE9C;
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link href="css/main.css" rel="stylesheet"/&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="hero"&gt;
        &lt;div id="herotext"&gt;
          &lt;h1&gt;Make the Most of your Food With Pantree&lt;/h1&gt;
          &lt;p&gt;Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.&lt;/p&gt;
          &lt;form id="form"&gt;
            &lt;input id="searchbar" type="text" placeholder="yourname@email.com"/&gt;
            &lt;input id="searchbutton" type="submit" value="Get Early Access" /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;img src="images/phone.png"/&gt;
      &lt;/div&gt;
      &lt;div id="functions"&gt;
        &lt;div id=save&gt;
          &lt;div id="savemoney"&gt;
            &lt;img id="savemoneyimage" src="images/savemoney.png"/&gt;
            &lt;div id="savemoneytext"&gt;
              &lt;h2&gt;Save Money&lt;/h2&gt;
              &lt;p&gt;Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;  
          &lt;div id="savefood"&gt;
            &lt;img id="savefoodimage" src="images/savefood.png"/&gt;
            &lt;div id="savefoodtext"&gt;
              &lt;h2&gt;Save Food&lt;/h2&gt;
              &lt;p&gt;Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="savetime"&gt;
            &lt;img id="savetimeimage" src="images/savetime.png"/&gt;
            &lt;div id="savetimetext"&gt;
              &lt;h2&gt;Save Time&lt;/h2&gt;
              &lt;p&gt;Pantree's built-in kitchen organizing system helps you monitor all of the food in your home, so figuring out what food you have is quick &amp; easy.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;  
        &lt;/div&gt;  
      &lt;/div&gt;
      &lt;div id="vocational"&gt;
        &lt;h1&gt;These Folks Could Use Pantree Every Day&lt;/h1&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;div id="tweetone"&gt;
              &lt;img src="images/tweetone.png"/&gt;
              &lt;div id="tweetonetext"&gt;
                &lt;h3&gt;Kat&lt;/h3&gt;
                &lt;h3&gt;@devicat&lt;/h3&gt;
                &lt;p&gt;I have no idea what to make for dinner. I am so bad at this game. &lt;span class="hashtag"&gt;#adulting&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;          
            &lt;/div&gt;  
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div id="tweettwo"&gt;
              &lt;img src="images/tweettwo.png"/&gt;
              &lt;div id="tweettwotext"&gt;
                &lt;h3&gt;Jack Falahee&lt;/h3&gt;
                &lt;h3&gt;@RestingPlatypus&lt;/h3&gt;
                &lt;p&gt;Dear Mom, How do I organize my kitchen? Love, me&lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;div id="tweetthree"&gt;
              &lt;img src="images/tweetthree.png"/&gt;
              &lt;div id="tweetthreetext"&gt;
                &lt;h3&gt;mason ryan&lt;/h3&gt;
                &lt;h3&gt;@MasonTheManiac&lt;/h3&gt;
                &lt;p&gt;Something in my fridge smells really bad.... &lt;span class="hashtag"&gt;#cantfindit&lt;/span&gt;&lt;/p&gt;
              &lt;/div&gt;  
            &lt;/div&gt;  
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="calltoaction"&gt;
        &lt;h1&gt;Manage your Kitchen, Effortlessly&lt;/h1&gt;
        &lt;p&gt;Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.&lt;/p&gt;
        &lt;form id="form"&gt;
          &lt;input id="searchbar" type="text" placeholder="yourname@email.com"/&gt;
          &lt;input id="searchbutton" type="submit" value="Get Early Access" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>