We Keep Coding

How to Limit Elements on a Screen?

I have 4 boxes, (which will later be 9), in which I want there to be a total of 3 on screen at all times, excluding mobile. The remainder who are not on screen will be moved to the right end of the box line, but be unseen. I have looked around for a method to accomplish this via HTML & CSS and have found none. Is there a way to do this with HTML, CSS, or JS?
.bioSlider {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.box {
position: relative;
display: inline-block;
width: 390px;
padding: 10px;
}
.slideImage {
position: relative;
height: 300px;
}
.slideImage img {
object-fit: cover;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
opacity: 0;
transition: 0.6s ease-in-out;
}
.quoteText {
position: absolute;
text-align: left;
font-style: italic;
word-break: break-all;
padding: 30px;
top: 30px;
color: #e5e5e5;
opacity: 0;
transition: 0.6s ease-in-out;
}
.detailBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 9px;
background-color: #e8e8e8;
}
.slideImage:hover .overlay {
opacity: 50%;
}
.slideImage:hover .quoteText {
opacity: 100%;
}
<div>
<!-- Cadet Slider -->
<ul class='bioSlider'>
<li class='cadetOne'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Red_Card.png' alt=''>
<div class='overlay'> </div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
</div>
</div>
</div>
</li>
<li class='cadetTwo'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Yellow_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
</div>
</div>
</div>
</li>
<li class='cadetThree'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Blue_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
</div>
</div>
</div>
</li>
<li class='cadetFour'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Green_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
</div>
</div>
</div>
</li>
</ul>
</div>

Output Percentage with accordion in each of every multi-step forms once submitted

I am really new in web development. So I really need some guides, tips and tricks on how to do coding. So here's the details...
After I fill up my Yes and No checkboxes forms on each steps of a multi form steps, I want to have a grade on each steps. for example Leadership Development has a 12 Yes and 8 No and the system will calculate it's percentage from
(This is the pie chart) & (This is the accordion)
0 to 49% Your leadership skills will need to be improved for your business to at least
survive.
50% to 70% You have middling leadership skills that could probably be sufficient for your
business to survive.
70% to 100% You have very good leadership skills to help your organization grow.
How to show it's pie chart with percentage inside of it and beside the pie is an accordion which will also give details from the ratings.
Please I really need help on this one.
Here's the progress bar I made for an example
<style>
#output .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-size: 35px;
margin-top: 152px;
}
#output .active, .accordion:hover {
background-color: #ccc;
}
#output .panel {
padding: 0 18px;
background-color: #abaaaa;
max-height: 0;
color: black;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#output .accordion:after {
content: '\002B';
color: #d02a3e;
font-weight: bold;
float: right;
margin-left: 5px;
}
#output .active:after {
content: "\2212";
}
.progress-pie-chart {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #ececec;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: orange;
}
.progress-pie-chart.red .ppc-progress-fill {
background: red;
}
.progress-pie-chart.red span {
color: red;
}
.progress-pie-chart.orange .ppc-progress-fill {
background: orange;
}
.progress-pie-chart.orange span {
color: orange;
}
.progress-pie-chart.green.gt-50,
.progress-pie-chart.green .ppc-progress-fill {
background: green;
}
.progress-pie-chart.green span {
color: green;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 128px, 128px, 64px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 64px, 128px, 0);
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 64px, 128px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 128px, 128px, 64px);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 111.30435px/2);
top: calc(50% - 111.30435px/2);
width: 111.30435px;
height: 111.30435px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 18px;
}
.ppc-percents span cite {
font-size: 35px;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
.progress-pie-chart {
margin: 0 auto 0;
margin-top: 115px;
}
</style>
<div class="row">
<div class="col-lg-6">
<div class="progress-pie-chart" data-percent="24">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="60">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="95">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 align-items-stretch">
<button class="accordion">Leadership Development System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Marketing System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Financial System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>

Resizing Screen: Messes up sections on website

I was creating a website and am stuck because I keep resizing the screen and trying to make it mobile friendly. However, there are two sections that I cannot seem to fix. I cannot remember how I got the first three sections to stop moving while I resized the screen. I was wondering if I could get some help.
My website is shivaniahuja.com
If you look at the contact me page and the footer and try to resize them you will see the problem. Please let me know if you can help and I can attach my code if needed.
*{
margin: 0;
padding: 0;
}
#main{
width: 100%;
height: 100vh;
background-image: url(../imgs/Background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
display: flex;
}
img{
width: 15%;
height: 100%;
}
#first-name{
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #2f3338;
padding-left: 2%;
font-size: 2vmin;
}
nav{
width: 100%;
height: 10vh;
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
nav ul li{
list-style-type: none;
display: inline-block;
}
nav ul{
float: right;
margin-right: 20px;
}
nav ul li a{
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 2vmin;
color: #2f3338;
padding: 20px;
}
nav ul li a:hover{
color: #3377CC;
}
#main p{
position: absolute;
top: -1000px;
text-align: center;
color: white;
font-size: 50px;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
section{
width: 100%;
text-align: center;
padding-top: 7%;
}
html{
scroll-behavior: smooth;
overflow-x: hidden;
}
section#about-me #p2{
width: 40%;
position: relative;
height: 40%;
float: right;
top: 40%;
margin-top: 3%;
right: 10%;
line-height: 200%;
font-family: 'Libre Franklin', sans-serif;
text-align: justify;
font-size: 2.2vmin;
}
section#about-me{
height: 60vh;
}
section#photography{
height: 110vh;
background-color: #F5F5F5;
}
section#experience{
height: 280vh;
background-color: #F5F5F5;
}
section#contact{
}
#contact-header{
font-size: 2.5vmin;
top: 20%;
}
section#about-me #pic{
width: 40%;
height: 40%;
position: absolute;
right: 55%;
margin-top: 2%
}
#contact-div{
position: relative;
top: 50%;
}
section#blog{
width: 100%;
padding-top: 8.5%;
}
.navs::before,
.navs::after {
display: inline-block;
content: "";
border-top: 2px solid black;
width: 5%;
margin: 0 1rem;
transform: translateY(-0.5rem);
}
h2{
position: relative;
top: -200;
}
#title{
position: absolute;
top: 50%;
font-size: 10vmin;
color: white;
left: 35%;
}
span{
position: absolute;
top: 60%;
font-size: 300%;
color: white;
left: 35%;
display: inline-block;
}
span:before{
content: 'HTML';
animation: animate infinite 8s;
position: relative;
left: 50%;
font-size: 6vmin;
}
#keyframes animate{
0%{
content: 'ENGINEER';
}
25%{
content: 'ENGINEER';
}
50%{
content: 'DEVELOPER';
}
75%{
content: 'DEVELOPER';
}
100%{
content: 'ANALYST';
}
}
.pic-and-text{
width: 18%;
height: 22%;
border-radius: 15%
}
section#experience #pic01{
left: -20%;
margin-top: 2%;
margin-bottom: 5%;
position: relative;
}
section#experience #berkeley-name{
position: relative;
font-size: 3vmin;
left: 5%;
top: 0%;
color: #3377CC;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-major{
position: relative;
font-size: 16px;
bottom: 200px;
left: 78px;
color: #5E9515;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-location{
position: relative;
font-size: 16px;
bottom: 195px;
right: 65px;
font-weight: bold;
font-family: 'Roboto', sans-serif;
}
section#experience #berkeley-description{
position: relative;
bottom: 180px;
height: 40px;
width: 600px;
right: -610px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
font-size: 2vmin;
}
section#blog #full-blog{
position: relative;
top: -40px;
}
section#blog .blog-description{
font-size: 20px;
font-family: 'Libre Franklin', sans-serif;
line-height: 30px;
}
#pic001{
width: 17.5%;
}
#pic002{
width: 17.5%;
}
#pic003{
width: 17.5%;
}
.header{
font-size: 3.5vmin;
}
.blog-pics{
margin-left: .5%;
margin-top: 1%
}
section#blog #blog-description01{
margin-top: 15px;
}
#photography-paragraph{
font-size: 2.5vmin;
font-family: 'Libre Franklin', sans-serif;
margin-bottom: 2vh;
margin-top: 2vh;
}
.polaroid {
cursor:pointer;
margin:10px;
border: 1px solid #cccccc78;
background-color: #ffffff;
padding: 7%;
box-shadow: 4px 6px 4px #00000012;
text-align: center;
font-family: 'Caveat','Arial', sans-serif;
}
.polaroid .square {
background:black;
}
.polaroid .picture {
width:100%;
padding-top: 100%;
background-position: center;
background-size:cover;
opacity:0;
}
.polaroid.developed .square {
animation: flash 1.5s;
background:black;
}
.polaroid.developed .picture {
animation: fade-in 3s;
opacity:1;
}
.polaroid .labelName {
text-align: center;
font-size: 24px;
line-height:26px;
}
.polaroid-gallery {
display:-ms-grid;
display:grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 23% 23% 23% 23%;
margin-left: 5%
}
/* Adjust CSS Grid for Microsoft Edge */
.polaroid:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column:1;
}
.polaroid:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column:2;
}
.polaroid:nth-child(3) {
-ms-grid-row: 1;
-ms-grid-column:3;
}
.polaroid:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column:4;
}
.polaroid:nth-child(5) {
-ms-grid-row: 2;
-ms-grid-column:1;
}
#keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#keyframes flash {
2% {
background:black;
opacity: 0.5;
}
5% {
background:white;
opacity:1;
}
50% {
background:white;
opacity:.5
}
}
#footer{
background-color: #000000;
width: 100%;
padding-top: 2vh;
color: white;
padding-left: 1%;
}
#footer-paragraph{
position: relative;
top: 60%;
}
#import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #000;
background-color: #FFF;
border: 1px solid #000;
padding-top: 12px;
border-radius: 22px;
-moz-border-radius: 22px;
-webkit-border-radius: 22px;
-o-border-radius: 22px;
}
.socialbtns .fa:hover {
color: #FFF;
background-color: #000;
border: 1px solid #000;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Libre+Franklin:wght#200&display=swap" rel="stylesheet">
<link rel="stylesheet" href ="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<h1 id="title"> SHIVANI AHUJA</h1>
<span></span>
<body>
<div class ="container">
<div id="main">
<nav>
<div id= "first-name"> SHIVANI AHUJA </div>
<ul>
<li> ABOUT ME </li>
<li> EXPERIENCE</li>
<li> BLOG POSTS</li>
<li> PHOTOGRAPHY</li>
<li> CONTACT </li>
</ul>
</nav>
</div>
<section id="about-me">
<h1 class="navs" class="header"> ABOUT ME</h1>
<img src="assets/imgs/paris-2017-home.jpeg" id="pic">
<div id="p2div">
<p id="p2"> Hey! My name is Shivani and I am an undergraduate student at UC Berkeley studying Computer Science. I'm super passionate about Artificial Intelligence and Natural Language Processing. Haha, I sound like a nerd right now, but I really love what I do! I've spent tons of hours curating images and watching HTML and CSS tutorials on Youtube to finally create this masterpiece that lies in front of you. The process of creating this website was fun, yet undeniably frustrating. After creating my first website from scratch, I plan to create many more and teach others how to recreate this process!</p>
</div>
</section>
<section id="experience">
<h1 class="navs"> HERE'S WHAT I'VE DONE SO FAR</h1>
<div class= "experience-squares" id="experience-square">
<img src="assets/imgs/coming.png" class="pic-and-text" id="pic01">
<p id="berkeley-name"> Creator and iOS Developer, Summer 2020</p>
<p id="berkeley-major"> IBS Application </p>
<p id="berkeley-location"> Hayward, CA</p>
<p id="berkeley-description"> Currently,</p>
</div>
</div>
</section>
<section id="blog">
<div id=full-blog>
<h1 class="navs" class="header">BLOG</h1>
<p class="blog-description" id= "blog-description01"> I write about women in tech, hiking, and some of my personal experiences.</p>
<p class="blog-description" id= "blog-description02"> Here are three of my recent posts:</p>
<div id="pictures">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic001" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic002" class="blog-pics">
<img src="assets/imgs/paris-2017-home.jpeg" id="pic003" class="blog-pics">
</div>
</div>
</section>
<section id="photography">
<h1 class="navs" class="header">PHOTOGRAPHY</h1>
<p id="photography-paragraph"> Creating memorabilia is an art. An art that has allowed me to capture the emotions, smiles, and happiness of every individual depcited in this gallery.</p>
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sunflower.JPG')"></div>
</div>
<div class="labelName">SunFlowers</div>
<div class="labelText">Berkeley, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/pic-with-mom.png')"></div>
</div>
<div class="labelName">Mommy's Girl</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/sailboat.jpg')"></div>
</div>
<div class="labelName">Sailboat</div>
<div class="labelText">Santa Cruz, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/glasses-aesthetic.JPG')"></div>
</div>
<div class="labelName">Foolin' Around</div>
<div class="labelText">Berkeley, CA</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<div class="polaroid-gallery">
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/flowers.jpg')"></div>
</div>
<div class="labelName">Orchid Bush</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/graduation.jpg')"></div>
</div>
<div class="labelName"> Besties 4 Life!</div>
<div class="labelText">Hayward, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/background.jpg')"></div>
</div>
<div class="labelName">Pink Sky</div>
<div class="labelText">Lake Tahoe, CA</div>
</div>
<div class="polaroid" onmouseover="this.classList.add('developed')">
<div class="square">
<div class="picture" style="background-image: url('assets/imgs/cousins.PNG')"></div>
</div>
<div class="labelName">Three Idiots</div>
<div class="labelText">Ludhiana, PB</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
</section>
<div id="wrap">
<section id="contact">
<h1 class="navs" class="contact-header">CONTACT</h1>
<p id="contact-paragraph">If you have any inquiries or questions, please feel free to contact me on these social media
sites. I look forward to hearing from you! </p>
<br/>
<div align="center" class="socialbtns">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
</body>
</html>

I found one inconsistency were you wrapped up your div tag...
This often leads to buggy layouts just for not closing tags properly.
<div id="wrap">
<section id="contact">
<!-- your HTML code -->
<div align="center" class="socialbtns">
<!-- your HTML code -->
</div>
</div><!-- REMOVE THIS! did you want to finish div#wrap here ? -->
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div><!-- or did you want to finish div#wrap here ? -->

To make the whole site responsive put a <meta> tag like the one below before and after the <body> tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Next, set out your HTML like this:
<div id="wrap">
<section id="contact">
<!-- Code here -->
<div align="center" class="socialbtns">
<!-- Your Code Here -->
</div>
</section>
<section id="footer">
<p id="footer-paragraph"> Copyright #2020 Shivani Ahuja. All Rights Reserved.
</section>
</div>
And of course use the <meta> tags I mentioned

Add position relative to .polaroid-gallery
.polaroid-gallery {
display: -ms-grid;
display: grid;
-ms-grid-columns: 25% 25% 25% 25%;
grid-template-columns: 40% 40% 40% 36%;
margin-left: 5%;
position: absolute;
}
nav {
width: 100%;
/* height: 10vh; */ i remove this for the menu dont resize to much
background-color: #FFFFFF;
line-height: 80px;
z-index: 1;
position: fixed;
}
section#contact {
margin-bottom: 2vh;
font-size: 2.5vmin;
border: 3px solid red; /* to test */
background: black; /* to test */
}
i recommend you check the structure of your html, and relative sizes to responsive design

Elements not displaying correctly across bigger screens

I've created a landing page that has a lot of alignment issues on bigger screens, despite having a lot of {margin: auto;} functions. Not sure what is wrong.
Additional issues:
1) small white space to the left of the showcase banner
2) white space at the bottom of the page, below footer
3) yellow line in the middle should be in line with title (Featured Speaker)
4) Yellow button CTA not wrapping nicely
Any help with anything listed would be much appreciated.
Thanks!
1)
<!-- Showcase Section-->
<div id="showcase">
<header>
<nav class="cf">
<ul class="cf">
<li class="hide-on-small">
<a href="https://www.centro.net/">
<img src="https://www2.centro.net/l/75412/2019-01-
15/4kzjqb/75412/179423/Centro_Webinar_logo.png" alt="Centro Webinars">
</a>
</li>
</ul>
<a href="#" id='openup'>Centro Webinars</a>
</nav>
</header>
/* Showcase */
#showcase {
margin: 0;
padding: 0;
padding-bottom: 20px;
background: url('https://www2.centro.net/l/75412/2019-01-
15/4kzjql/75412/179431/herotallerwider.png') no-repeat center/cover;
width: 100%;
position: relative;
overflow-y: hidden;
}
#showcase .container {
margin-top: 13vh;
margin-left: 0vw;
margin-right: 43vw;
}
#showcase h1 {
margin-left: 7vw;
font-size: 1.5rem;
margin-bottom: -0.1em;
color: #1fadde;
}
#showcase h3 {
margin-left: 7vw;
font-size: 0.9rem;
margin-bottom: -1.3em;
color: #3a3d40;
}
#showcase h2 {
margin-left: 7vw;
font-size: 1.2rem;
margin-bottom: -0.5em;
color: #1fadde;
}
#showcase p {
margin-left: 7vw;
font-size: 14px;
margin-bottom: -0.5em;
color: #3a3d40;
width: 70%;
}
2)
/* Footer */
footer .footersection {
background: #333;
padding: 1rem;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
#footer img {
margin-top: 0.5vh;
height: 20px;
width: 20px;
display: inline;
margin-left: auto;
margin-right: 10px;
}
#footer .smicons {
margin-left: auto;
margin-right: auto;
text-align: center;
}
<!-- Footer Section -->
<footer>
<section id="footer" class="footersection">
<div class="container">
<div class="smicons">
<a href="https://www.facebook.com/centro.llc">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcg/75412/179517/facebook.png" alt="Centro Facebook">
</a>
<a href="https://twitter.com/centro">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcb/75412/179519/twitter.png" alt="Centro Twitter">
</a>
<a href="https://www.linkedin.com/company/centro">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcd/75412/179515/linkedin.png" alt="Centro LinkedIn">
</a>
<a href="https://www.youtube.com/user/centrollc">
<img src="https://www2.centro.net/l/75412/2019-01-
16/4kzrcj/75412/179521/youtube.png" alt="Centro YouTube">
</a>
</div>
</div>
</footer>
3)
<!-- Featured Speakers Section -->
<section id="featuredspeakers" class="featuredspeakerssection">
<div class="container">
<div class="featspeak">
<h3 pardot-region="speakerORspeakers" pardot-region-
type="simple">Featured Speaker
</h3>
</div>
<div>
<hr>
</div>
<img src="https://www2.centro.net/l/75412/2019-01-
15/4kzjqj/75412/179433/ryanmancheecirclegoldring.png" alt="Ryan Manchee">
<h4 pardot-region="speaker name" pardot-region-type="simple">[SPEAKER
NAME]
</h4>
<h5 pardot-region="speaker title" pardot-region-type="simple">Speaker
Title
</h5>
<p class="lead" pardot-region="speaker bio1" pardot-region-
type="simple">Speaker Bio 1</p>
<p class="lead" pardot-region="speaker bio2" pardot-region-
type="simple">Speaker Bio 2</p>
</div>
/* Feature Speaker Section */
.featuredspeakerssection {
padding: 1rem 0;
}
#featuredspeakers .container {
margin: 0;
margin-top: 1vh;
margin-left: 0vw;
}
#featuredspeakers h3 {
font-size: 1.5rem;
color: #1fadde;
text-align: left;
margin-left: 7vw;
margin-top: 7vh;
}
#featuredspeakers hr {
display: inline-block;
margin: -50px 50px 75px 20px;
overflow: hidden;
border-style: inset;
border-width: 0.5px;
border-color: #ffbf3d;
width: 80%;
margin-left: 24vw;
margin-right: auto;
margin-bottom: 3vh;
position: relative;
}
4)
/* Buttons */
.button {
background-color: #FFBF3D;
border: none;
color: #3a3d40;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: block;
width: 8%;
font-size: 14px;
margin-left: auto;
margin-right: auto;
margin-top: -2vh;
border-radius: 5px;
}
<!-- Banner Section -->
<section id="banner" class="bannersection">
<div class="container">
<h3 pardot-region="banner title" pardot-region-type="simple">Catch Up
With Your Industry</h3>
<p class="lead" pardot-region="banner blurb" pardot-region-
type="simple">Level up and review our most popular past webinars.</p>
</div>
<div pardot-region="banner CTA" pardot-region-type="simple"
href="https://www.centro.net/webinar" class="button">Take Me There
</div>
</section>

1) Your showcase banner image is white on the left, so is displaying correctly.
2) You have issues with the opening and closing of section and div tags
3) Just played around with your margins. The current solution will always give varied results on different sized screens because of the fixed size of the speaker's photo. I would look at finding a different solution for the positioning of your yellow hr
4) Changed this div to an anchor because you need it to act like a button.
/* Showcase */
#showcase {
margin: 0;
padding: 0;
padding-bottom: 20px;
background: url('https://www2.centro.net/l/75412/2019-01-15/4kzjql/75412/179431/herotallerwider.png') no-repeat center/cover;
width: 100%;
position: relative;
overflow-y: hidden;
}
#showcase .container {
margin-top: 13vh;
margin-left: 0vw;
margin-right: 43vw;
}
#showcase h1 {
margin-left: 7vw;
font-size: 1.5rem;
margin-bottom: -0.1em;
color: #1fadde;
}
#showcase h3 {
margin-left: 7vw;
font-size: 0.9rem;
margin-bottom: -1.3em;
color: #3a3d40;
}
#showcase h2 {
margin-left: 7vw;
font-size: 1.2rem;
margin-bottom: -0.5em;
color: #1fadde;
}
#showcase p {
margin-left: 7vw;
font-size: 14px;
margin-bottom: -0.5em;
color: #3a3d40;
width: 70%;
}
/* Footer */
footer .footersection {
background: #333;
padding: 1rem;
color: #FFFFFF;
text-align: center;
margin: 0 auto;
overflow: hidden;
}
#footer img {
margin-top: 0.5vh;
height: 20px;
width: 20px;
display: inline;
margin-left: auto;
margin-right: 10px;
}
#footer .smicons {
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Feature Speaker Section */
.featuredspeakerssection {
padding: 1rem 0;
}
#featuredspeakers .container {
margin: 0;
margin-top: 1vh;
margin-left: 0vw;
}
#featuredspeakers h3 {
font-size: 1.5rem;
color: #1fadde;
text-align: left;
margin-left: 7vw;
margin-top: 7vh;
}
#featuredspeakers hr {
display: inline-block;
overflow: hidden;
border-style: inset;
border-width: 0.5px;
border-color: #ffbf3d;
margin-left: 40%;
width: 60%;
position: relative;
top: -40px;
}
/* Buttons */
.button {
background-color: #FFBF3D;
border: none;
color: #3a3d40;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: block;
width: 8%;
font-size: 14px;
margin-left: auto;
margin-right: auto;
margin-top: -2vh;
border-radius: 5px;
}
1)
<!-- Showcase Section-->
<div id="showcase">
<header>
<nav class="cf">
<ul class="cf">
<li class="hide-on-small">
<img src="https://www2.centro.net/l/75412/2019-01-15/4kzjqb/75412/179423/Centro_Webinar_logo.png" alt="Centro Webinars">
</li>
</ul>
Centro Webinars
</nav>
</header>
</div>
2)
<!-- Footer Section -->
<footer>
<section id="footer" class="footersection">
<div class="container">
<div class="smicons">
<img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcg/75412/179517/facebook.png" alt="Centro Facebook">
<a href="https://twitter.com/centro"><img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcb/75412/179519/twitter.png" alt="Centro Twitter">
</a>
<img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcd/75412/179515/linkedin.png" alt="Centro LinkedIn">
<img src="https://www2.centro.net/l/75412/2019-01-16/4kzrcj/75412/179521/youtube.png" alt="Centro YouTube">
</div>
</div>
</section>
</footer>
3)
<!-- Featured Speakers Section -->
<section id="featuredspeakers" class="featuredspeakerssection">
<div class="container">
<div class="featspeak">
<h3 pardot-region="speakerORspeakers" pardot-region-type="simple">Featured Speaker </h3>
</div>
</div>
<hr>
<div>
<img src="https://www2.centro.net/l/75412/2019-01-15/4kzjqj/75412/179433/ryanmancheecirclegoldring.png" alt="Ryan Manchee">
<h4 pardot-region="speaker name" pardot-region-type="simple">[SPEAKER NAME] </h4>
<h5 pardot-region="speaker title" pardot-region-type="simple">Speaker Title </h5>
<p class="lead" pardot-region="speaker bio1" pardot-region-type="simple">
Speaker Bio 1
</p>
<p class="lead" pardot-region="speaker bio2" pardot-region-type="simple">
Speaker Bio 2
</p>
</div>
</section>
4)
<!-- Banner Section -->
<section id="banner" class="bannersection">
<div class="container">
<h3 pardot-region="banner title" pardot-region-type="simple">Catch Up With Your Industry</h3>
<p class="lead" pardot-region="banner blurb" pardot-region-type="simple">
Level up and review our most popular past webinars.
</p>
</div>
<a pardot-region="banner CTA" pardot-region-type="simple" href="https://www.centro.net/webinar" target="_blank" class="button">
Take Me There
</a>
</section>

CSS : One of the DIVs gets positioned higher when window is resized

Pls see my codepen here: http://codepen.io/Chiz/pen/oLpGOB
It looks fine, until you resize the window and reduce the width of the browser window, and then the first card becomes positioned taller than the rest of the 3 cards! What causes this and how do I fix it?
Tks!
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
<div class="header">
<h1>Choose your subscription plan</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price"><span class="bold">$9.99</span><br />1 account</div>
</div>
<div class="Card">
<h2>Personal</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price"><span class="bold">$29.99</span><br />5 accounts</div>
</div>
<div class="Card">
<h2>Advanced</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price"><span class="bold">$39.99</span><br />10 accounts</div>
</div>
<div class="Card">
<h2>Business</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price"><span class="bold">$49.99</span><br />50 accounts</div>
</div>
</div>

Use vertical-align: top;
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position: relative;
vertical-align: top;
}

One more best solution is you can tile your cards into full width which I have shown in demo. (for responsive mode)
Responsive CSS:
#media only screen and (max-width: 800px) {
/*** You can change the responsive screen size as per your requirement.
.Card {
width: 100%;
margin-bottom: 20px;
}
}
Full Demo:
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
#media only screen and (max-width: 800px) {
.Card {
width: 100%;
margin-bottom: 20px;
}
}
<div class="header">
<h1>Choose your subscription plan
</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price">
<span class="bold">$9.99
</span>
<br />1 account
</div>
</div>
<div class="Card">
<h2>Personal
</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price">
<span class="bold">$29.99
</span>
<br />5 accounts
</div>
</div>
<div class="Card">
<h2>Advanced
</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price">
<span class="bold">$39.99
</span>
<br />10 accounts
</div>
</div>
<div class="Card">
<h2>Business
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price">
<span class="bold">$49.99
</span>
<br />50 accounts
</div>
</div>
</div>

just add vertical-align: top; for the Card class.

Your layout is looking good in big screen That's why you need to write this code only for small devices so You can try the below code.
#media (max-width: 768px){
.CardContainer .Card{
float: left;
}
}

You need to add vertical-align:top; to .Card.
Because you have used display:inline-block So, by default it is vertical-align:baseline;
And it will align the baseline of the element with the baseline of the parent element.
Your updated Codepen
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
vertical-align:top;
}

I think this will do the job:
.CardContainer .card {vertical-align:top;}