Align header inside div issue

 
<div class="introbox-one header">
        <h1 class="header">HEY! THIS IS A HEADER</h1>
      </div>

.introbox-one {
  width: 80%;
  height: 16px;
  border: 1px solid #9A00FF;
  padding: 10px;
  background-color: #9A00FF;
  animation: introbox-one 1s ease-in;
}
 
@keyframes introbox-one {
  0% {
    transform: translateX(-100%);
  }
}
 
.header {
  display: flex;
  justify-content: flex-end;
  color: white;
  font-size: 2.6rem;
}