HTML 2 div's next to eachother but also centered - html

Question

HTML CODE
CSS CODE
I want the 2 "product" div's to be next to eachother.but them both in the middle
i tired float left, and text align center (in all kinds of combinations and under every .class related but noting worked
text align center puts them both in the center but underneath eachother
text align center, followed by float left, does the same, or puts them both left.
.articles{
font-family: Arial, Helvetica, sans-serif;
}
.buy{
padding: 5px 5px 5px 5px;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.product{
margin: 60px 0 60px 60px;
float: left;
}
.product img{
width: 200px;
height: 400px;
border: 10px solid tan;
}
I tied the combo:
" text-align: center;
float: left; "
both under .articles and under .product
also tried splitting them
(e.g. text-align under articles, and float under product. and other ways around)

Answer 1

Ok, you can do this with flexbox. Try this code right here:
<style>
.leftside {
background: #000599;
}
.rightside {
background: #006999;
}
.leftside, .rightside {
color: rgba(255,255,255,.4);
padding: 2%;
text-align: left;
}
#media ( min-width : 600px ){
body {
background: linear-gradient(90deg, #000599 50%, #006999 50%);
}
.flexbox {
width: 100%;
margin: 0 auto;
display: -webkit-flex;
display: flex;
}
.leftside,
.rightside {
-webkit-flex: 1;
flex: 1;
background: none;
}
}
</style>
<div class="flexbox">
<div class="leftside">
<p>
left
</p>
</div>
<div class="rightside">
<p>
right
</p>
</div>
</div>