html - 标题没有移动到中心和响应式设计问题

Question

我正在尝试将标题“教育”移动到网页的中心，但这样做会遇到问题。

同时，我也在做这部分的响应式设计，上面有图片，下面有文字。谁能帮我解决这些问题？

下面添加了 HTML 和 CSS 代码。

谢谢你。

* {
  margin: 0;
  padding: 0;
}

.education-sec {
  width: 100%;
  padding: 40px 0;
  overflow: hidden;
}

.education-width {
  max-width: 1200px;
  overflow: hidden;
  padding: 0 20px;
  margin: auto;
  width: 100%;
  display: table;
  table-layout: fixed;
}

.education-sec h1 {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 28px;
  text-align: center;
  text-transform: uppercase;
}

.education-info {
  display: table-cell;
  vertical-align: middle;
  width: 60%;
  padding-top: 30px;
  padding-left: 100px;
}

.education-info p {
  font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
  font-size: 15px;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.6;
  overflow: hidden;
  margin: 10px;
}

.ed-under-line h1 {
  -webkit-text-decoration: #f57e3a solid underline;
  text-decoration: #f57e3a solid underline;
  -webkit-text-underline-position: under;
  text-underline-position: under;
}

.ed-img {
  display: table-cell;
  vertical-align: middle;
  width: 40%;
}

.ed-img .bw_image {
  margin-left: 100px;
  max-width: 100%;
  height: auto;
  padding-top: 50px;
}

<section id="education">
  <div class="education-sec">
    <div class="education-width">
      <div class="ed-under-line">
        <h1>Education</h1>
      </div>
      <div class="ed-img">
        <img class="bw_image" src="https://c4.wallpaperflare.com/wallpaper/500/442/354/outrun-vaporwave-hd-wallpaper-thumb.jpg">
      </div>
      <div class="education-info">
        <p> XYZ University
          <br> M.Sc
          <br> Jan 21 - Sep 22</p>
      </div>
    </div>
  </div>
</section>

标签： htmlcssresponsive-designhtml-heading