'Header out of line

I have a link, and it is below my header. I have tried float:top (I don't even think that is real)

.header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
}
<div class="header">
  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>
</div>
htmlcssalignment


Solution 1:[1]

header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
}
  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>

Solution 2:[2]

If you want to have the link still pinned at the top, then use position: fixed;

.header {
  background-color: grey;
  border-radius: 2px;
  padding: 1%;
  margin: 0%
  padding-top: 10px;
}

#links {
  font-size: xx-large;
  text-align: right;
  color: white;
  position: fixed;
  top: 10px;
  right: 10px;
}
<div class="header">
  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Aaron Vasilev
Solution 2 OtiK.cz

Related Questions