我正试图制作方框来列出即将到来的事件，但在水平对齐时遇到了困难。我正在使用codepen.io，我将链接我所做的。我以为制作第二个盒子#2和个盒子#1的确切细节一样，只是移动到右边会起作用，但我不知道为什么它不起作用。我确保没有将它嵌套在个盒子#one中，而只是在。container中。

https://codepen.io/bibaboy/pen/yzvjwkr

body { display: grid; background-image: radial-gradient(#3f5efb, #fc466b); } .container { width: 1500px; height: 1000px; margin: auto; border: 1px double black; } #one { width: 20%; height: 350px; margin-left: 10%; margin-top: 5%; padding: 5px; border-radius: 35px; background: pink; box-shadow: 0 2px 10px 0 #e667b8; } #two { width: 20%; height: 350px; margin-left: 40%; margin-top: 10%; padding: 5px; border-radius: 35px; background: pink; box-shadow: 0 2px 10px 0 #e667b8; } #header1 { font-size: 40px; color: #477ced; text-align: center; text-shadow: 1px 1px black; } #p1 { font-size: 25px; color: black; text-align: center; }

<div class="container">

  <div id="one">
    <p id="header1">September 15 2021</p>
    <hr>
    <p id="p1"> We will be holding a conference for blahblah company in the <b>7th floor of the IBC Bank building</b>.</p>
  </div>

  <div id="two">
    <p id="header1"> Hello Hello </p>
  </div>

</div>

顺晟科技：

您可以使用bootstrap flex进行这些对齐。 https://getbootstrap.com/docs/4.4/utilities/flex/