问如何在HTML5上对齐文章

EN

/* Wrap the class "left" and "centre" with a div (i named it "main_content") */

.main_content {
  display: flex;
  flex-direction: row;
}
nav {
  /* Removed this -> margin: -130px 0 0 -10px; */
  position: fixed;
}

.centre {
  /* Removed this --> margin-top: 0; */
}

nav>ul {
  /* Changed margin-top from 20px to 0px */ 
  margin-top: 0px;
}

@import url('https://fonts.googleapis.com/css2?family=Limelight&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap');
nav {
  height: 120px;
  background-color: black;
  width: 100%;
  display: block;
  position: fixed;
}

.dropdown {
  padding-right: 5px;
  margin-right: 5px;
}

.tasa {
  text-transform: uppercase;
  font-family: 'Limelight', cursive;
}

.nav-bar-image {
  width: 110px;
  height: 100px;
  margin: 10px -10px 10px 10px;
  display: inline;
}

nav>ul>li>a {
  text-decoration: none;
  color: white;
}

nav>ul>li {
  font-size: 20px;
  font-family: Zen Dots;
  display: inline;
  padding: 10px;
}

nav>ul>li:hover {
  background-color: darkgrey;
}

nav>ul>li>ul {
  display: none;
  margin-top: 10px;
  font-size: 14px;
  margin-left: 165px;
  list-style-type: none;
  position: absolute;
}

nav>ul>li:hover>ul {
  display: block;
}

nav>ul>li>ul>li {
  padding-left: 10px;
  padding-right: 69.5px;
}

nav>ul>li>ul>li:hover {
  background-color: darkgrey;
}

nav>ul>li>ul>li>a {
  color: white;
  text-decoration: none;
}

nav>ul {
  display: inline-block;
  vertical-align: top;
  margin-top: 0px;
  list-style-type: none;
}

body {
  background-image: url(background.jpg);
}

article {
  background-color: rgba(255, 231, 179, 0.80);
  width: 400px;
  margin: 130px 0 0 10px;
  /*130px 0 0 10px*/
  padding: 5px 10px 10px;
  height: 200px;
  text-align: justify;
  height: 750px;
  display: block;
  vertical-align: top;
}

.main_content {
  display: flex;
  flex-direction: row;
}

.left {
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  height: 200px;
}

.centre {
  height: 200px;
}

h1 {
  color: white;
  font-family: Limelight;
  font-size: 40px;
  text-align: center;
  margin: 10px 0 0;
}

p {
  text-align: jusify;
  color: white;
}

article>ul>li>a {
  color: white;
  text-decoration: none;
}

article>ul {
  list-style-type: none;
}

::-webkit-scrollbar {
  width: 16px;
}

::-webkit-scrollbar-thumb {
  background: #ffe7b3;
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
  box-shadow: inset 0 0 5px grey;
  border-radius: 8px;
}


/*

::-webkit-scrollbar-button:single-button {
  background-color: #ffffff;
  display: block;
  border-style: solid;
  height: 13px;
  width: 16px;
}

*/

::-webkit-scrollbar-thumb:hover {
  background: #d6c39a;
}


/*

::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-width: 0 8px 8px 8px;
  border-color: transparent transparent #000000 transparent;
}

::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
  border-color: transparent transparent #5e5e5e transparent;
}

::-webkit-scrollbar-button:single-button:vertical:increment {
  border-width: 8px 8px 0 8px;
  border-color: #000000 transparent transparent transparent;
}

::-webkit-scrollbar-button:vertical:single-button:increment:hover {
  border-color: #5e5e5e transparent transparent transparent;
}

*/

html {
  cursor: url(tasa-cursor-medium.cur), default;
}

a {
  cursor: url(tasa-cursor-a-large.cur), default;
}

<header>
  <nav>
    <img src="logo.jpg" alt="TASA logo." class="nav-bar-image">
    <ul>
      <li><a href="Home.html">Home</a></li>
      <li><a href="#">Details</a></li>
      <li class="dropdown"><a href="#">Presentations</a>
        <ul>
          <li><a href="#">Introduction</a></li>
          <li><a href="#">Constellations</a></li>
          <li><a href="#">Lunar Events</a></li>
        </ul>
      </li>
      <li><a href="links.html">Links</a></li>
    </ul>
  </nav>
</header>
<div class="main_content">
<article class="left">
  <h1>TASA</h1>
  <p>

  </p>
</article>
<article class="centre">
  <h1>Images</h1>
</article>
  </div>