How to change flex column width while keeping item centered

Issue

I have a flexbox in my HTML, and I have two columns. What I have trouble doing is changing the right column's width. If I set the width to, say, width: 50%, the .container is no longer centered on the page, and the Google Maps size is also changed. I am trying to shrink the .container size but keep the whole flexbox centered on the page and the size of the maps the same. Any help would be greatly appreciated.

#google-maps
{
    background: #FFFFFF;
}

.hours-and-location
{
}

#hours-and-location-container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 3em;
    width: 50%;
}

.column
{
    display: flex;
    flex-direction: column;
    margin: 1em;
}

.locations
{
    width: 100%;
}

.page-title-header
{
    text-align: center;
}

<h1 class="page-title-header">
    Hours and Locations
</h1>

<div id="hours-and-location-container">
    <iframe class="column" id="google-maps"
            src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F"
            width="600" height="500">
    </iframe>

    <div class="hours-and-location">
        <div class="locations column">
            <h2>
                Locations
            </h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua.
            </p>
            <p>
                Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed
                elementum tempus egestas sed.
            </p>
            <p>
                Lectus quam id leo in vitae turpis massa sed.
            </p>
            <p>
                Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing
                commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor
                nec feugiat nisl.
            </p>
        </div>
        <div class="hours">

        </div>
    </div>
</div>

Solution

I think you're looking for this

#google-maps
{
    background: #FFFFFF;
}

.hours-and-location
{
  width:40vh
}

#hours-and-location-container
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items:center;
    margin: 3em;

}

.column
{

    margin: 1em;
}



.page-title-header
{
    text-align: center;
}

<h1 class="page-title-header">
    Hours and Locations
</h1>

<div id="hours-and-location-container">
    <iframe class="column" id="google-maps"
            src="https://www.google.com/maps/d/u/0/embed?mid=1_iD-tpjnLUFwGIWoEcsx05qBgbx112w&ehbc=2E312F"
            width="600" height="500">
    </iframe>

    <div class="hours-and-location">
        <div class="locations column">
            <h2>
                Locations
            </h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua.
            </p>
            <p>
                Augue mauris augue neque gravida in. Est sit amet facilisis magna. In vitae turpis massa sed
                elementum tempus egestas sed.
            </p>
            <p>
                Lectus quam id leo in vitae turpis massa sed.
            </p>
            <p>
                Imperdiet proin fermentum leo vel orci porta non pulvinar. A iaculis at erat pellentesque adipiscing
                commodo elit at imperdiet. Semper eget duis at tellus at urna condimentum. Purus in massa tempor
                nec feugiat nisl.
            </p>
        </div>
        <div class="hours">

        </div>
    </div>
</div>

Answered By - Mohd Zaid