Cannot Move text within a Div above a container with 3 div boxes with flexbox

Question

I'm attending the Code Academy course: Build a Website with HTML, CSS, and Github Pages (https://www.codecademy.com/learn/paths/learn-how-to-build-websites)

I'm working on the Tea Cozy Project, where they supply you with a pic of a page and you have to recreate it, the pic is this one Tea Cozy Page Specs

I made the HTML structure but I'm struggling to complete the CSS section, I'm trying to correctly make the Location section but I cannot move the Location text within 15px from the div containing the 3 boxes

                #location-section {
                
                  background-color: black;
                  height: 500px;
                  justify-content: center;
                  
                
                }
                
                    #location-section .content-center {
                      display: inline;
                      background-color: green;
                      justify-content: center;
                      align-items: center;
                      flex-wrap: column;
                      margin-bottom: 0;
                      
                    }
                    
                    
                    #location-section .content-center h2 {
                      text-align: center;
                      color: seashell;
                      background-color: red;
                    
                    }
                    
                    #location-section .location-container {
                      display: flex;
                      flex-wrap: column;
                      justify-content: space-between;
                      align-items: center;
                      background-color: blue;
                      margin: 0;
                      min-height:200px;
                      overflow:hidden;
                    }
                    
                    #location-section .location-container1 {
                      background-color: red;
                      border: 2px solid white;
                      width: 300px;
                      align-items: center;
                      height: 200px;
                      max-width: calc((100% / 3) - 40px);
                      margin-left: 20px;
                    }
                    
                    #location-section .location-container2 {
                      background-color: red;
                      border: 2px solid white;
                      width: 300px;
                      align-items: center;
                      height: 200px;
                      max-width: calc((100% / 3) - 40px);
                    }
                    
                    #location-section .location-container3 {
                      background-color: red;
                      border: 2px solid white;
                      width: 300px;
                      align-items: center;
                      height: 200px;
                      max-width: calc((100% / 3) - 40px);
                      margin-right: 20px;
                    
                    }
                    
                    h4 {
                      text-align: center;
                    }

    <pre>
        <div id="location-section">
          <div class="content-center">
            <h2>Locations</h2>
          </div>
          <div class="location-container">
            <div class="location-container1">
              <h4>
                Address 1
              </h4>
            </div>
            <div class="location-container2">
              <h4>
                Address3
              </h4>
            </div>
            <div class="location-container3">
              <h4>
                Address3
              </h4>
            </div>
          </div>
        </div>
        </pre>