title: Grid items are off center
body: <p>Whenever I resize the browser to max, everything works but the cards in the packages section aren't center. What am I missing?</p>
  
  <p><a href="https://jolly-poitras-00d5ec.netlify.app/" rel="nofollow noreferrer">https://jolly-poitras-00d5ec.netlify.app/</a></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>/* 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');
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="packages"&gt;
    &lt;div class="packages-title"&gt;
      &lt;h4&gt;A plan for everyone&lt;/h4&gt;
      &lt;h2&gt;Plans &amp;amp; Pricing&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="packages-cards"&gt;
        &lt;div class="basic"&gt;
          &lt;h4&gt;Basic Plan&lt;/h4&gt;
          &lt;h1&gt;$49&lt;/h1&gt;
          &lt;p&gt;
            Up to 1000 Mbps up &amp;amp; down &lt;br&gt; Lowest ping times &lt;br&gt; No setup fees &lt;br&gt; No data cap &lt;br&gt; No contract &lt;br&gt; 24/7 support
          &lt;/p&gt;
          &lt;button class="btn"&gt;Sign Up&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="plus"&gt;
          &lt;h4&gt;Plus Plan&lt;/h4&gt;
          &lt;h1&gt;$79&lt;/h1&gt;
          &lt;p&gt;
            Up to 1000 Mbps up &amp;amp; down &lt;br&gt; Lowest ping times &lt;br&gt; No setup fees &lt;br&gt; No data cap &lt;br&gt; No contract &lt;br&gt; 24/7 support
          &lt;/p&gt;
          &lt;button class="btn"&gt;Sign Up&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="pro"&gt;
          &lt;h4&gt;Pro Plan&lt;/h4&gt;
          &lt;h1&gt;$99&lt;/h1&gt;
          &lt;p&gt;
            Up to 1000 Mbps up &amp;amp; down &lt;br&gt; Lowest ping times &lt;br&gt; No setup fees &lt;br&gt; No data cap &lt;br&gt; No contract &lt;br&gt; 24/7 support
          &lt;/p&gt;
          &lt;button class="btn"&gt;Sign Up&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>