how do I properly position a button element with css?

I am attempting to position my button to the top right of the header, just as the Netflix landing page has it.

here is my css:

* {
  margin:0;
  padding:0;
}

body,html {
  height: 100%;
  background: honeydew;
}

/* Header*/
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/assets/apple.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
}
#logBtn {
  float: right;
  height: 33px;
  width: 86px;
  color: honeydew;
  background-color: red;
  border-style: none;
  border-radius: 5px;
}

Here is my html:

<!DOCTYPE html>
<html>
  <head>
    <title>myPage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />

    <link href="main.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <header>
        <h1>Hello</h1>

        <button id="logBtn">Log In</button>
      </header>
    </body>
</html>

However my button is just pinned to the lower left of the header like so:

how can i fix this issue?

Solution

Run and Check out the code. Let me know if you need improvements

* {
  margin:0;
  padding:0;
}

body,html {
  height: 100%;
  background: honeydew;
}

/* Header*/
header {
  height: 100vh;
  background-image: url(https://s3-us-west-2.amazonaws.com/assets/apple.jpg);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  text-align: center;
  position:relative;
}
#logBtn {
  position:absolute;
  height: 33px;
  width: 86px;
  color: honeydew;
  background-color: red;
  border-style: none;
  border-radius: 5px;
  top:10px;
  right:10px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>myPage</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />

    <link href="main.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <header>
        <h1>Hello</h1>

        <button id="logBtn">Log In</button>
      </header>
    </body>
</html>