如何像语法网站那样整齐地格式化div？

Question

基本上，我对minimalistic and neat Grammarly web-design is, 的使用方式感到惊讶，因此我试图将其复制到我的新手项目中。他们如何整齐地对齐div？我试图检查他们的代码，但其中有大量带有疯狂名称的自动生成的类。

不要判断我的代码，我基本上是用Google搜索并抓取了很多代码。

这是我到目前为止尝试过的：

<div class="container">
      <div class="left">
        <h1>Meet Your Doctor Online.</h1>
        <p>
          Are you sick? Not able to leave the bed? Your doctor can be right
          there with you!
        </p>
      </div>
      <div class="right">
        <p>Im right!</p>
      </div>
    </div>

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}
.left {
  width: 45%;
  display: block;
  justify-content: space-around;
  align-items: center;
  border: 1px solid red
}
.right {
  width: 45%;
  display: block;
  justify-content: space-around;
  align-items: center;
  border: 1px solid red
}

Answer 1

Visual Studio代码可以帮助您轻松设置代码格式。使用VScode打开您的项目，转到VScode Marketplace并搜索html代码格式化程序，然后选择安装。您可能需要重新启动VScode才能使用该插件。有时它会自动变为可用状态。完成此操作后，进入代码编辑器窗口，然后右键单击代码编辑器窗口上的任意位置。您应该看到一个弹出的选项列表，即“ SELECT FORMAT DOCUMENT”选项（VScode代码可能会要求您选择要使用的格式化程序）。单击所需的格式化程序后，将对HTML代码进行格式化。您可以下载更漂亮的漂亮插件。

我希望能有所帮助。