Profile Cards don't align properly

Question

I'm trying to create a website for my school news channel, and I'm making profile cards for each of the cast members.

Right now, though, the way the cards align is weird, it only stays in the first 40-ish-percent, and I can't find anything that's causing it.

Here's a screenshot about what I'm talking about

You see how those white cards that says John Doe on them, and how they're on that left side? Yeah, I'm trying to get it to fill the entire page, but nothing I'm doing is working

Here's ALL of the code, if anyone needs it. The cards themselves are in the 'section' tags, in their own respective div tags:

body {
  margin: 0px;
  background: -webkit-linear-gradient(left top, #092f6e, #0093FF);
  background: -o-linear-gradient(bottom right, #092f6e, #0093FF);
  background: -moz-linear-gradient(bottom right, #092f6e, #0093FF);
}

color: #f7f7f7;
font-family:"Swis721 Lt BT",
sans-serif;
font-weight: 300;

}
#header {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#video {
  position: absolute;
  -webkit-filter: saturate(1.25);
  filter: saturate(1.25);
}
#MUTV {
  position: absolute;
  margin-top: 10%;
  margin-left: 60%;
  max-width: 100%;
  width: 10%;
  height: 10%;
  background-color: #dddddd
}
#headerText {
  position: absolute;
  color: #FFFFFF;
  font-family: "Swis721 Lt BT";
  font-size: 35px;
  margin-top: 10%;
  margin-left: 7.5%
}
#headerTextContainer {
  width: 50%;
  height: 50%;
  max-width: 50%;
}
.navContainer {
  margin: auto;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  margin-top: 27%;
}
.button {
  font-family: "Swis721 Lt BT";
  font-size: 150%;
  color: #ffffff;
  text-decoration: none;
  width: 10%;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
  border: 2px solid #f7f7f7;
  text-align: center;
  position: relative;
  overflow: hidden;
  -webkit-transition: .5s;
  transition: .5s;
}
.button:after {
  position: absolute;
  -webkit-transition: .5s;
  transition: .5s;
  content: '';
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
  height: 120%;
  left: -10%;
  -webkit-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  transform: skewX(20deg);
  z-index: -1;
}
.button:hover {
  cursor: pointer;
  color: #008cff;
}
.button:hover:after {
  width: 100%;
  left: 0% left: -10%;
  width: 120%;
}
.active {
  font-family: "Swis721 Lt BT";
  font-size: 150%;
  color: #008cff;
  background-color: #ffffff;
  text-decoration: none;
  width: 18%;
  padding: 15px;
  border: 2px solid #f7f7f7;
  text-align: center;
  position: relative;
  overflow: hidden;
}
main {
  margin-top: 5%
}
section {
  display: table-row;
}
.card {
  display: table-cell;
  background-color: #FFFFFF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: auto;
  text-align: center;
}
.cardContainer {
  padding: 0 16px;
}
.title {
  color: grey;
  font-size: 18px;
}

<div id="header">
  <video id="video" width="100%" autoplay loop>
        <source src="This PC/Documents/FahadKhan_FinalProject/Images/Background.mp4"</source>
    </video>
  <br>
  <a href="https://www.youtube.com/channel/UCJTD2hhiUEf9F5TXukZj8PA" target="_blank" id="MUTV">
  </a>
  <div id="headerTextContainer">
    <h1 id="headerText">The guys in front and behind the camera<br>The magic behind it all!</h1>
  </div>
</div>

<nav class="navContainer">
  <a class="button" href="United TV - Home.html">HOME</a>
  <a class="button" href="United TV - News.html">NEWS</a>
  <a class="button" href="United TV - About.html">ABOUT</a>
  <div class="active">CAST</div>
  <a class="button" href="United TV - Contact.html">CONTACT</a>
</nav>

<main>
  <section>
    <div class="card">
      <img src="img.jpg" alt="John" style="width:100%">
      <div class="cardContainer">
        <h1>John Doe</h1>
        <p class="title">CEO & Founder, Example</p>
        <p>Harvard University</p>
        <br>
      </div>
    </div>
    <br>
    <div class="card">
      <img src="img.jpg" alt="John" style="width:100%">
      <div class="cardContainer">
        <h1>John Doe</h1>
        <p class="title">CEO & Founder, Example</p>
        <p>Harvard University</p>
        <br>
      </div>
    </div>
    <br>
    <div class="card">
      <img src="img.jpg" alt="John" style="width:100%">
      <div class="cardContainer">
        <h1>John Doe</h1>
        <p class="title">CEO & Founder, Example</p>
        <p>Harvard University</p>
        <br>
      </div>
    </div>
  </section>
</main>

I know it's a lot to read through, but I'd be greatly appreciated if someone could find an answer to this. Thanks :)

Answer 1

Is this what you are looking to achieve? https://codepen.io/gyerroju/pen/KqgwEr

Basically, I have:

• Added a class "ccontainer" to the section within which your .card divs are
• Changed the display of .card from table-cell to inline-block

The CSS for ccontainer (and the updated .card class) is as follows:

.ccontainer {
  text-align: center;
  display: block;
}

.card {
  display: inline-block;
}

Note that if backwards compatibility is not much of a concern, there are methods for layout other than tables using the CSS grid and flexbox properties. More information about layout can be found here https://css-tricks.com/guides/layout/

Articles on that page make for great reading and give you perspective on what options are available and what can be done.

Answer 2

I see each section has display: table-row;, I'm guessing you tried adding width: 100%; and noticed it didn't work... here's why

Simply, a table row needs a table to be in. So you're problem seems to be solved by adding the following to your main element styles.

display: table;
width: 100%;

Or if there is other content in your main element, then wrap the section(s) in a new element and apply the styles to that.