How do I center two child divs where each of those divs each have their own width? For example, one-CodePudding

I am new to css - thanks in advance for the help.

I have a parent div with two child divs in it. I want it so that the parent div spans 100% of the window and then to have the combined width of the two child divs be a max-width and centered within the parent div.

Here is what I have so far:

 .learnings-main-content > * {
  display: flex;
  justify-content: center;
  flex-basis: 100%;
  padding: 20px;
  background-color: #ef972d;
}

#learnings-main-content-area1 {
  /*left side where content will live*/
}

#learnings-main-content-area2 {
  /*right side where content will live*/
}

Thanks for the help, this has been a real pain and I am sure it's simple enough.

CodePudding user response：

*{
  margin:0;
  box-sizing:border-box;
}
  
  .learnings-main-content {
  height:100vh;
  width:100vw;
  display: flex;
}

#learnings-main-content-area1 {
  background-color:red;
  flex:1;
}

#learnings-main-content-area2 {
  background-color:blue;
  flex:1;
}

<div >
  <div id="learnings-main-content-area1">
    sa
  </div>
  <div id ="learnings-main-content-area2">
    sa
  </div>
</div>

CodePudding user response：

Just change your CSS class .learnings-main-content to the example below:

.learnings-main-content {
  display: flex;
  justify-content: center;
  flex-basis: 100%;
  padding: 20px;
  background-color: #ef972d;
}