I've been having an issue where when I maximize the browser window, everything on my website looks fine except for the cards in the packages section. They aren't centering properly. Any ideas on what might be causing this?
Check out the website here
/* Packages */
.packages {
background-color: #F3F1F6;
text-align: center;
font-family: 'Roboto', sans-serif;
padding: 50px 0;
}
.packages-title h4 {
font-weight: 300;
opacity: 50%;
}
.packages-title h2 {
font-size: 2em;
}
.packages-cards h1 {
font-family: 'Lato';
font-size: 4em;
padding: 10px 0 20px;
}
.packages-cards div {
background-color: #fff;
margin: 50px auto;
padding: 50px 0;
max-width: 350px;
-webkit-box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.15);
}
.packages-cards h4 {
font-weight: 300;
opacity: 50%;
}
.packages-cards p {
font-weight: 300;
opacity: 50%;
line-height: 2;
padding-bottom: 20px;
}
@media(min-width: 996px) {
.container {
margin: 0 10%;
}
.showcase {
background-image: url('imgs/cityline.jpg');
}
.showcase-content h1 {
font-size: 2.5em;
}
.showcase-content p {
margin: 20px 0 45px 0;
}
.about-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 60px;
}
.about-cards div {
max-width: 300px;
}
.packages-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px;
}
.packages-cards div {
margin: 50px 0;
max-width: 300px;
}
.sign-up {
background-image: url('imgs/signup-1200.jpg');
}
}<section class="packages">
<div class="packages-title">
<h4>A plan for everyone</h4>
<h2>Plans & Pricing</h2>
</div>
<div class="container">
<div class="packages-cards">
<div class="basic">
<h4>Basic Plan</h4>
<h1>$49</h1>
<p>
Up to 1000 Mbps up & down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
</p>
<button class="btn">Sign Up</button>
</div>
<div class="plus">
<h4>Plus Plan</h4>
<h1>$79</h1>
<p>
Up to 1000 Mbps up & down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
</p>
<button class="btn">Sign Up</button>
</div>
<div class="pro">
<h4>Pro Plan</h4>
<h1>$99</h1>
<p>
Up to 1000 Mbps up & down <br> Lowest ping times <br> No setup fees <br> No data cap <br> No contract <br> 24/7 support
</p>
<button class="btn">Sign Up</button>
</div>
</div>
</div>
</section>