Can't get the header above my flex items and centered inside the flex container-CodePudding

I have three flex items aligned at the center on both axis inside a flex container. My problem is that the header of this section is also aligned with them. Instead it's supposed to be centered above them. I'm still learning.

The Snippet:

.big-location-container {
  height: 500px;
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.location-container {
  width: 300px;
  height: 50%;
  margin: 15px 40px;
  background-color: black;
  opacity: 1;
}

<div class="big-location-container">

  <h2>Locations</h2>

  <div class="location-container">
    <h3>Downtown</h3>
    <p>384 West 4th St</p>
    <p>Suite 108</p>
    <p>Portland, Maine</p>
  </div>

  <div class="location-container">
    <h3>East Bayside</h3>
    <p>3433 Phisherman's Avenue</p>
    <p>(Northwest Corner)</p>
    <p>Portland, Maine</p>
  </div>

  <div class="location-container">
    <h3>Oakdale</h3>
    <p>515 Crescent Avenue</p>
    <p>Second Floor</p>
    <p>Portland, Maine</p>
  </div>
</div>

CodePudding user response：

I changed the big-location-container to flex-direction: column; and wrapped the location-container's and made that flex-direction: row;.
Also I've removed the height from location-container.

.locations-wrapper {
    display: flex;
}

.big-location-container {
    height: 500px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: white;
}

.location-container {
    width: 300px;
    margin: 15px 40px;
    background-color: black;
    opacity: 1;
    color: white;
}

<div class="big-location-container">
        
        <h2>Locations</h2>

        <div class="locations-wrapper">
            <div class="location-container">
                <h3>Downtown</h3>
                <p>384 West 4th St</p>
                <p>Suite 108</p>
                <p>Portland, Maine</p>
            </div>

            <div class="location-container">
                <h3>East Bayside</h3>
                <p>3433 Phisherman's Avenue</p>
                <p>(Northwest Corner)</p>
                <p>Portland, Maine</p>
            </div>

            <div class="location-container">
                <h3>Oakdale</h3>
                <p>515 Crescent Avenue</p>
                <p>Second Floor</p>
                <p>Portland, Maine</p>
            </div>
        </div>

    </div>

CodePudding user response：

You can do like this

.big-location-container {
    height: 500px;
    width: 1200px;
    margin: 0 auto;
    background-color: white;
}
.big-location-container h2 {
    text-align: center;
}
.main-location-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.location-container {
    width: 300px;
    height: 50%;
    margin: 15px 40px;
    background-color: black;
    color: white;
    opacity: 1;
}

<div class="big-location-container">         
    <h2>Locations</h2>
    <div class="main-location-container">
        <div class="location-container">
            <h3>Downtown</h3>
            <p>384 West 4th St</p>
            <p>Suite 108</p>
            <p>Portland, Maine</p>
        </div>

        <div class="location-container">
            <h3>East Bayside</h3>
            <p>3433 Phisherman's Avenue</p>
            <p>(Northwest Corner)</p>
            <p>Portland, Maine</p>
        </div>

        <div class="location-container">
            <h3>Oakdale</h3>
            <p>515 Crescent Avenue</p>
            <p>Second Floor</p>
            <p>Portland, Maine</p>
        </div>
    </div>
</div>