Header out of line-CodePudding

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 >
  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>
</div>

CodePudding user response：

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>

CodePudding user response：

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 >
  <header>
    <h1>Jackson Pope</h1>
    <div id="links">
      <a href="about.html">About Me</a>
    </div>
  </header>
</div>