Centering weird/misplaced for text in CSS-CodePudding

I am working on a project that has a part where I need text to be centered, but when I use text-align:center; this is what happens

Where the Hosting for school projects is off the line of being inline of Independent Study text.

CodePudding user response：

Note that the width styles of both containers are equal in the example below.

body {
  background-color: black;
}
.first {
  width: 400px;   /* the widht style of the first container is set to 400px. */
  text-align: center;
  border: 1px solid red;
  color: white;
}
.second {
  width: 400px;   /* the widht style of the second container is set to 400px. */
  text-align: center;
  border: 1px solid blue;
  color: white;
}

<body>
  <div >
    <h1>Independent Study</h1>
  </div><br>

  <div >
    <h3>Hosting for school projects</h3>
  </div>
</body>