I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!

```css
body {
  padding: 0;
  margin: 0;
}

/* center aligned vertically and horizontally*/

.totalCenter {
  position: relative !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* centered horizontally */

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* div for main page content */

#mainDiv {
  width: 500px;
  max-width: 500px;
}

.title {
  padding: 0px;
  margin: 0px;
  margin-bottom: 15px;
}

/* login title */

#pageTitle {
  font-size: 65px;
  color: black;
  margin-left: 0px;
  padding-left: 0px;
}

#tagline {
  font-size: 30px;
  color: rgb(79, 79, 79);
  margin-bottom: 22px;
}

/* input for email/password */

.infoInput {
  text-align: center;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 10px;
  outline-width: 0;
  padding: 5px;
  width: 100%;
  height: 50px;
  font-size: 22px;
}

/* login/register button */

.submitButton {
  color: black;
  background-color: rgb(255, 223, 0);
  border: none;
  border-radius: 4px;
  border-bottom: 4px solid rgb(218, 189, 0);
  cursor: pointer;
  outline: none;
  width: 100%;
  height: 55px;
  left: 10%;
  font-size: 25px;
  margin-top: 25px;
}

.submitButton:hover {
  background: rgb(235, 204, 0);
  transition: all 0.2s ease;
  cursor: pointer;
}

.submitButton:active {
  border: 0;
  transition: all 0.2s ease;
}

.topBarButton {
  border: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
  width: 90px;
  height: 40px;
  margin: 10px;
  font-size: 20px;
  float: right;
}

#login {
  color: black;
  background-color: gold;
}

#register {
  background-color: black;
  color: gold;
}

#logo {
  margin: 10px;
  width: 40px;
  height: 40px;
  float: left;
}
```

```html
<head>
  <link href="/home/style/style.css" rel="stylesheet" />
</head>

<body>
  <div id="topbar">
    <img id="logo" src="/images/logo.png">

    <button class="topBarButton" id="register">
                Register
            </button>

    <button class="topBarButton" id="login">
                Login
            </button>
  </div>

  <div id="mainDiv" class="totalCenter">
    <h1 id="pageTitle" class="title">title</h1>
    <h2 id="tagline" class="title">page tagline</h2>

    <input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
    <button class="submitButton center">Next</button>
  </div>
</body>
```