Padding-Top and Padding-Bottom Not Working

Question

For some reason padding-top and padding-bottom are not working for my #functions div.

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.

I want the #functions div to look like this:

Is there something wrong with my HTML or CSS? Am I approaching this the wrong way?

 * { 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; } 

 <!DOCTYPE html> <html> <head> <link href="css/main.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head> <body> <div id="hero"> <div id="herotext"> <h1>Make the Most of your Food With Pantree</h1> <p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p> <form id="form"> <input id="searchbar" type="text" placeholder="yourname@email.com"/> <input id="searchbutton" type="submit" value="Get Early Access" /> </form> </div> <img src="images/phone.png"/> </div> <div id="functions"> <div id=save> <div id="savemoney"> <img id="savemoneyimage" src="images/savemoney.png"/> <div id="savemoneytext"> <h2>Save Money</h2> <p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p> </div> </div> <div id="savefood"> <img id="savefoodimage" src="images/savefood.png"/> <div id="savefoodtext"> <h2>Save Food</h2> <p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p> </div> </div> <div id="savetime"> <img id="savetimeimage" src="images/savetime.png"/> <div id="savetimetext"> <h2>Save Time</h2> <p>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 & easy.</p> </div> </div> </div> </div> <div id="vocational"> <h1>These Folks Could Use Pantree Every Day</h1> <ul> <li> <div id="tweetone"> <img src="images/tweetone.png"/> <div id="tweetonetext"> <h3>Kat</h3> <h3>@devicat</h3> <p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p> </div> </div> </li> <li> <div id="tweettwo"> <img src="images/tweettwo.png"/> <div id="tweettwotext"> <h3>Jack Falahee</h3> <h3>@RestingPlatypus</h3> <p>Dear Mom, How do I organize my kitchen? Love, me</p> </div> </div> </li> <li> <div id="tweetthree"> <img src="images/tweetthree.png"/> <div id="tweetthreetext"> <h3>mason ryan</h3> <h3>@MasonTheManiac</h3> <p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p> </div> </div> </li> </ul> </div> <div id="calltoaction"> <h1>Manage your Kitchen, Effortlessly</h1> <p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p> <form id="form"> <input id="searchbar" type="text" placeholder="yourname@email.com"/> <input id="searchbutton" type="submit" value="Get Early Access" /> </form> </div> </body> </html> 

Answer 1

This can be done using CSS Flexbox .

For Reference your CSS should be somewhat like:

#savefood, #savemoney, #savetime {
  display: flex;
  justify-content: center;
  align-items: center;
}

#savefood {
  flex-direction: row-reverse;
}

Look at the snippet below ( use fullscreen to view it properly ):

 * { 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; } #savefood, #savemoney, #savetime{ display: flex; justify-content: center; align-items: center; } #savefood { flex-direction: row-reverse; } 

 <html> <head> <link href="css/main.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> </head> <body> <div id="hero"> <div id="herotext"> <h1>Make the Most of your Food With Pantree</h1> <p>Pantree for iOS lets you search for recipes based on the ingredients you already have in your home.</p> <form id="form"> <input id="searchbar" type="text" placeholder="yourname@email.com"/> <input id="searchbutton" type="submit" value="Get Early Access" /> </form> </div> <img src="images/phone.png"/> </div> <div id="functions"> <div id=save> <div id="savemoney"> <img id="savemoneyimage" src="http://placehold.it/200/200"/> <div id="savemoneytext"> <h2>Save Money</h2> <p>Pantree finds you recipes containing ingredients you already have in your home, saving you from unecessary trips to the grocery store.</p> </div> </div> <div id="savefood"> <img id="savefoodimage" src="http://placehold.it/200/200"/> <div id="savefoodtext"> <h2>Save Food</h2> <p>Pantree keeps track of expiration dates, alerting you when food will go stale so you can use it before it goes bad.</p> </div> </div> <div id="savetime"> <img id="savetimeimage" src="http://placehold.it/200/200"/> <div id="savetimetext"> <h2>Save Time</h2> <p>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 & easy.</p> </div> </div> </div> </div> <div id="vocational"> <h1>These Folks Could Use Pantree Every Day</h1> <ul> <li> <div id="tweetone"> <img src="images/tweetone.png"/> <div id="tweetonetext"> <h3>Kat</h3> <h3>@devicat</h3> <p>I have no idea what to make for dinner. I am so bad at this game. <span class="hashtag">#adulting</span></p> </div> </div> </li> <li> <div id="tweettwo"> <img src="images/tweettwo.png"/> <div id="tweettwotext"> <h3>Jack Falahee</h3> <h3>@RestingPlatypus</h3> <p>Dear Mom, How do I organize my kitchen? Love, me</p> </div> </div> </li> <li> <div id="tweetthree"> <img src="images/tweetthree.png"/> <div id="tweetthreetext"> <h3>mason ryan</h3> <h3>@MasonTheManiac</h3> <p>Something in my fridge smells really bad.... <span class="hashtag">#cantfindit</span></p> </div> </div> </li> </ul> </div> <div id="calltoaction"> <h1>Manage your Kitchen, Effortlessly</h1> <p>Pantree makes it easy to find recipes, keep track of food, and organize your kitchen.</p> <form id="form"> <input id="searchbar" type="text" placeholder="yourname@email.com"/> <input id="searchbutton" type="submit" value="Get Early Access" /> </form> </div> </body> </html> 

Hope this helps!

Answer 2

To apply padding make your element display: block and if your approach is to align it vertically. Make it display: flex; align-items: center display: flex; align-items: center and give a height to its parent element