How to change flex column width while keeping item centered - html

Question

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>

Answer 1

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>

Answer 2

you can assign a max- width on your flex div then wrap them in a another div that control to center them like below.
#google-maps
{
background: #FFFFFF;
}
.hours-and-location
{
}
#hours-and-location-container
{
display: flex;
flex-direction: row;
justify-content: center;
margin: 3em;
max-width: 700px;
gap: 10px;
}
.wrapper {
display:flex;
justify-content: center;
}
.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 class="wrapper">
<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>
</div>

Answer 3

Well, I have given margin: 0 auto; for making it to centre in any width from left to right it always takes the element to centre from the left and right. I hope this might will help or you are looking for something else?
#google-maps
{
background: #FFFFFF;
}
.hours-and-location
{
}
#hours-and-location-container
{
display: flex;
flex-direction: row;
justify-content: center;
margin: 3em;
width: 50%;
margin: 0 auto;
}
.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>