Centering Content in Two Side-by-Side Divs - html

Question

Trying to center content within each of the two side-by-side divs.
Not sure why my content within each of these divs seems to center towards each other.
I have built a main container and two divs within it. The text is center aligned but not sure how to center the content inside of the divs.
Any ideas?
.div-header-seller-resources{
font-size:30px;
line-height:32px;
margin-bottom:10px;
}
.div-detail-seller-resources{
font-size:20px;
line-height:22px;
margin-bottom:45px;
}
.div-main-container-seller-resources{
width:100%;
}
.div-main-container-seller-resources{
margin-top:20px;
text-align: center;
display: flex;
justify-content: center;
}
.div-seller-resources-left{
width: 300px;
display: flex;
text-align:center;
}
.div-seller-resources-right{
width: 350px;
display: flex;
text-align:center;
}
.seller-resources-height{
height: 125px;
}
<div class="div-main-container-seller-resources">
<div class="div-seller-resources-left" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">How Yodega Works</div>
<div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Referrals</div>
<div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">How to Sell with Yodega</div>
<div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
</div>
<div class="clear"></div>
</div>
<div class="div-seller-resources-right" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">Setting Up Your Store</div>
<div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Advanced Shipping & Product Options</div>
<div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Order Management, Seller Dashboard & Payment</div>
<div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="seller-overview-button-container">
<button id="button2" type="button contact-button">Seller Overview</button>
</div>

Answer 1

Add one more outer container div and add this rule.
.container{
display:flex;
Justify-content:center;
}
And inner div
.inner {
display: flex;
flex-direction:row;
}
And the structure will be(this is pug)
div(class="container ")
div(class=" inner")
div my_left
div my_right
Set width of left and right div.

Answer 2

You can give CSS to the parent class text-center and for your inside or child div use margin:0px auto;.
This will result making your each child element center inside the div.