I'm having trouble center positioning a flexbox list row with columns

Question

I'm trying to create a responsive flexbox row with columns in a list for some reason it never ever stays completely centered on the webpage. without fail it always has too much room on the left side. I have no idea why and I'm running out of options now has a tutorial of what exactly to do. Can anyone teach me how to do create three columns in a row with equal height and directly in the center?

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.box {
  width: 100%;
  max-width: 1700px;
  height: 500px;
  margin: 0 auto;
  border: 1px solid #c3c3c3;
  border-radius: 6px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box>* {
  flex: 1 1 auto;
}


/* Hero */

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
  display: flex;
  width: 100%;
}

.list-content {
  display: flex;
  flex-direction: column;
  padding: 1em;
  width: 100%;
}

.list-content p {
  flex: 1 0 auto;
}

.flex-container .list {
  width: 100%;
  max-width: 1700px;
}

@media all and (max-width: 640px) {
  .hero {
    margin-bottom: 80px;
  }
  .flex-container .list {
    width: 100%;
    max-width: 100px;
  }
}

@media all and (min-width: 640px) {
  .list-item {
    width: 100%;
  }
  .hero {
    margin: 0 50px 0 0;
  }
  .flex-container .list {
    width: 100%;
    max-width: 760px;
  }
}

@media all and (min-width: 960px) {
  .list-item {
    width: 33.33%;
  }
  .flex-container .list {
    width: 100%;
    max-width: 1700px;
  }
}

.hero {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 700px;
}

.hero .box {
  width: 100%;
  height: 100%;
  max-height: 500px;
}

<section class="hero" id="intro">
  <div class="flex-container column">
    <h2>What Is Our App?</h2>
    <ul class="list">
      <li class="list-item">
        <div class="list-content box">
          <h3>Buy and Sell New and Old Technology</h3>
          <p>Trade in your eligible device in secure, friendly marketplace with less fees than current competitors. Our app allows for the latest in technology from mobile devices, to cameras, to laptops.
          </p>
        </div>
      </li>
      <li class="list-item">
        <div class="list-content box">
          <h3>Power to the People</h3>
          <p> On our App, users buy and sell directly to other users. Without a middleman our community is able to offer the best prices at the highest value possible.
          </p>
        </div>
      </li>
      <li class="list-item">
        <div class="list-content box">
          <h3> Fast Shipping and No Broken Products</h3>
          <p>To keep the marketplace up to shape, our app forbides the buying and selling of broken items. Every product lists requirements and goes through an approval process to ensure shopping is done with the knowledge that only the best is on display.
            Shipping is fast and accurate to the address buyers input before proceeding to making a purchase.
          </p>
        </div>
      </li>
    </ul>
  </div>
</section>

Answer 1

Specifically, in your example, there is left padding that applied the ul element.

It came from the user agent's browser stylesheet.

You can simply override it like it was a normal css ul style:

ul {
  padding: 0;
}

or inside your .list-item selector:

.list-item {
  padding: 0;
  // ...
}