为什么标题文本没有与其余内容水平对齐？

Question

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;

  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
.content1{
  position: relative;
  margin: 130px auto;
  text-align: center;
  padding: 0 20px;
}
.content1 .text{
  font-size: 2.5rem;
  font-weight: 600;
  color: #202020;
}
.content1 .p{
  font-size: 2.1875rem;
  font-weight: 600;
  color: #202020;
}
footer{
  position: relative;
  bottom: 0px;
  width: 100%;
  background: #111;
}
.main-content{
  display: flex;
  color: #d9d9d9;
}
.main-content .box{
  flex-basis: 50%;
  padding: 10px 20px;
}
.box h2{
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  position: relative;
}
.box .content{
  margin: 20px 0 0 0;
  position: relative;
}
.box .content:before{
  position: relative;
  content: '';
  top: -10px;
  height: 20px;
  width: 100%;
  background: #1a1a1a;
}
.box .content:after{
  position: absolute;
  content: '';
  height: 2px;
  width: 15%;
  background: #f12020;
  top: -10px;
}
.left .content p{
  text-align: justify;
}
.left .content .social{
  margin: 20px 0 0 0;
}
.left .content .social a{
  padding: 0 2px;
  color: #d9d9d9;
}
.left .content .social a span{
  height: 40px;
  width: 40px;
  background: #1a1a1a;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
  transition: 0.3s;
}
.left .content .social a span:hover{
  background: #f12020;
}
.center .content .fas{
  font-size: 1.4375rem;
  background: #1a1a1a;
  height: 45px;
  width: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
  cursor: pointer;
}
.center .content .fas:hover{
  background: #f12020;
}
.center .content .text{
  font-size: 1.0625rem;
  font-weight: 500;
  padding-left: 10px;
}
.center .content .phone{
  margin: 15px 0;
}
.right form .text{
  font-size: 1.0625rem;
  margin-bottom: 2px;
  color: #656565;
}
.right form .msg{
  margin-top: 10px;
}
.right form input, .right form .msgForm{
  width: 100%;
  font-size: 1.0625rem;
  background: #fff;
  padding-left: 10px;
  border: 1px solid #222222;
}
.right form input:focus,
.right form .msgForm:focus{
  outline-color: #3498db;
}
.right form input{
  height: 35px;
}
.right form .btn{
  margin-top: 10px;
}
.right form .btn button{
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  background: #f12020;
  font-size: 1.0625rem;
  font-weight: 500;
  cursor: pointer;
  transition: .3s;
}
.right form .btn button:hover{
  background: #000;
}
.bottom center{
  padding: 5px;
  font-size: 0.9375rem;
  background: #151515;
}
.bottom center span{
  color: #656565;
}
.bottom center a{
  color: #f12020;
  text-decoration: none;
}
.bottom center a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 900px) {
  footer{
    position: relative;
    bottom: 0px;
  }
  .main-content{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .main-content .box{
    margin: 5px 0;
  }
}

  <script src="https://kit.fontawesome.com/a076d05399.js"></script>
<footer>
      <div class="main-content" id="contact">
        <div class="left box">
          <h2>About us</h2>
<div class="content">
            <p>
this is the story of my life</p>
<div class="social">
              <a href="https://facebook.com/coding.np"><span class="fab fa-facebook-f"></span></a>
              <a href="#"><span class="fab fa-twitter"></span></a>
              <a href="https://instagram.com/coding.np"><span class="fab fa-instagram"></span></a>
              <a href="https://youtube.com/c/codingnepal"><span class="fab fa-youtube"></span></a>
            </div>
</div>
</div>
<div class="center box">
          <h2>
Address</h2>
<div class="content">
            <div class="place">
              <span class="fas fa-map-marker-alt"></span>
              <span class="text">Birendranagar, Surkhet</span>
            </div>
<div class="phone">
              <span class="fas fa-phone-alt"></span>
              <span class="text">+089-765432100</span>
            </div>
<div class="email">
              <span class="fas fa-envelope"></span>
              <span class="text">[email protected]</span>
            </div>
</div>
</div>
    <div class="right box">
      <h2>Contact us</h2>
      <div class="content">
        <form action="#">
          <div class="email">
            <div class="text">Email *</div>
            <input type="email" required>
          </div>
          <div class="msg">
            <div class="text">Message *</div>
            <textarea id=".msgForm" rows="2" cols="25" required></textarea>
          </div>
              <br/>
          <div class="btn">
            <button type="submit">Send</button>
          </div>
          <div class="bottom">
            <center>
              <span class="far fa-copyright"></span> 2020 All rights reserved.
            </center>
          </div>
        </div>
</footer>

我有 3 个用于页脚的容器。每个容器中都有内容（更多容器），这些内容全部在容器“内容”的中心对齐。还有 h2 文本与其余内容不对齐。我如何对齐 h2 文本，以便它开始文本就像我的容器“内容的内容一样？我尝试使用 text-align: center; 但它没有对齐。我还尝试剪掉所有单个 css 容器样式，但是它没有改变容器“内容”中内容的位置。有人可以帮忙吗？

Answer 1

我检查了你的代码并在我的浏览器中运行它是正确的，并且你的 h2 与你的其余内容对齐，但是如果你想更改标题的对齐方式，你可以使用 flex 属性和 justify-content 来更改对齐方式

.box h2{
  display:flex;
  justify-content:flex-start;
}

如果仍有任何问题，请告诉我并纠正我，希望您的代码能够正确执行