Why is the first group of text not aligned with the others?

I'm trying align each group of text in the middle, while keeping the text left-aligned.

The first group of text is not aligned with the others for some reason. I'm wondering what's the best approach to fix this problem. I know I can make a hacky fix by doing something like margin-left: -2rem on the first group of text.

What would be the best approach to center each group of text in the middle while having a left text alignment?

* {    margin: 0;    padding: 0;  }    section {    display: flex;    flex-direction: column;  }    h1 {    text-align: center;    margin-bottom: 2rem;  }    div {    margin-right: auto;    margin-left: auto;    margin-bottom: 2rem;  }

<h1>Locations</h1>  <section>    <div>      <h2>Corporate</h2>      <p>17170 Loriot Rd        Gainesville State, PA 99999</p>      <span>(999) 999-9999</span>    </div>      <div>      <h2>Alabama</h2>      <p>9999 Street Name        City, State 99999</p>      <span>(999) 999-9999</span>    </div>      <div>      <h2>Nashville</h2>      <p>9999 Street Name        City, State 99999</p>      <span>(999) 999-9999</span>    </div>      <div>      <h2>Birmingham</h2>      <p>9999 Street Name        City, State 99999</p>      <span>(999) 999-9999</span>    </div>      <div>      <h2>Texas      </h2>      <p>9999 Street Name        City, State 99999</p>      <span>(999) 999-9999</span>    </div>  </section>

https://stackoverflow.com/questions/66524061/why-is-the-first-group-of-text-not-aligned-with-the-others March 08, 2021 at 11:47AM