Html 并排放置2个div（对齐）

我正在为某人制作一个网站，下一步我需要将div并排对齐。我已经尝试过flex，但它对我不起作用

这是我的html：

    <!-- starting charts1 -->
    <div id="wrapper" style="width:100%"> 
    <div id="columnchart"></div>
    <div id="columnchart2"></div>
    <div id="columnchart3"></div>
    <div id="piechart"></div>
    <div id="barchart"></div>
   </div>
   <!-- ending charts1 -->

他们已经居中了，所以这很好，这就是我想要的，也很有效。所以现在我把这些div放在中间：

<div id="columnchart"></div>
<div id="columnchart2"></div>
<div id="columnchart3"></div>
<div id="piechart"></div>

这些div是居中的，效果很好。但现在我想把这一个也放在中间，但在上面的div旁边：

<div id="barchart"></div>

---

我知道我很接近，但它不起作用。我已经读过其他标题相同的问题，但没有效果。

删除这个“左：50%”

#barchart {
position: sticky;
width: 515px;
margin: auto; 
  left:50%;
  right: 0;
  top: 0;
  bottom: 50%;
}

---

删除此“左：50%”

#barchart {
position: sticky;
width: 515px;
margin: auto; 
  left:50%;
  right: 0;
  top: 0;
  bottom: 50%;
}

---

将内容包装在两个容器中，如下所示：

<div class="cont">
    <div id="columnchart"></div>
    <div id="columnchart2"></div>
    <div id="columnchart3"></div>
    <div id="piechart"></div>
</div>
<div class="cont">
    <div id="barchart"></div>
</div>

---

这将使两个部分居中，并将它们一个接一个地放置。

将内容包装在两个容器中，如下所示：

<div class="cont">
    <div id="columnchart"></div>
    <div id="columnchart2"></div>
    <div id="columnchart3"></div>
    <div id="piechart"></div>
</div>
<div class="cont">
    <div id="barchart"></div>
</div>

---

这将使两个部分居中，并将它们一个放置在另一个的旁边。

我现在做了，所有内容都居中。最后一个（条形图）必须在柱形图旁边。最后一段需要和第一段并排。现在看起来有点奇怪，但它确实起了点作用。我现在做了，一切都在中间。最后一个（条形图）必须在柱形图旁边。最后一集需要和第一集并排播放。现在看起来有点奇怪，但确实有点效果。