Can't center div

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Memphis Belle</title>
    <link rel="stylesheet" href="css/master.css">
  </head>
  <body>
  <header>
      <input type="checkbox" id="skifter">
      <label for="skifter" id="burger">&#9776;</label>
      <div id="overskrift"><a href="#"><img src="img\Bilde2.png" height="70px" alt="Logo"></a></div>
      <a href="#"><img class="bilde" src="img\Bilde2.png" alt="Logo" height="50px;"></a>
      <!--  MENY- -->
        <nav>
            <a href="#">Hjem</a>
            <a href="#">Om oss</a>
            <a href="#">Kontakt</a>
            <a href="#">VĂĄre reiser</a>

        </nav>
  </header>
  <div class="main">
    <h1>Bestill fin flyreise</h1>
    <select class="" name="">
      <option value=""><-- Fly fra--></option>
      <option value="">Sarpsborg</option>
      <option value="">Fredrikstad</option>
      <option value="">Askim</option>
      <option value="">Moss</option>
      <option value="">Halden</option>
    </select>
    <select class="" name="">
      <option value=""><-- Fly fra--></option>
      <option value="">Sarpsborg</option>
      <option value="">Fredrikstad</option>
      <option value="">Askim</option>
      <option value="">Moss</option>
      <option value="">Halden</option>
    </select>
    <p>Utreisedato</p>
    <input type="date" name="" value="">
    <p>Antall reisende</p>
    <input type="number" name="" value="" max="5">
    <label for="">
    <input type="radio" name="" value=""> VIP plass (250,-)
    </label>
    <button type="button" name="button">Bestill flyreise</button>

  </div>
  </body>
</html>

CSS

*{
  padding: 0px;
  margin: 0px;
  font-family: Arial;
}
#overskrift{
  display: none;
}
header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  text-align:center;
  border-bottom: 5px solid transparent;
  border-image: linear-gradient(to right,  #660000 0%, #00ffff 100%);
  border-image-slice: 1
}

img.bilde{
  padding-top: 10px;
  padding-left: 10px;
}
nav {
  display: flex;
  flex-direction: row;
  float: right;
}
nav a{
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  text-decoration: none;
  font-weight: normal;
  color: #00ffff;
  line-height: 40px;
  padding: 0 20px 0 20px;
  font-size: 20px;
}

nav a:hover{
  color: #004d4d;
}

#skifter{
display: none;
}
#burger{
  color: #660000;
  font-size: 25px;
  font-weight: bold;
  color: white;
  display: none;
  padding-left: 10px;
}
.main{
  margin: 0px auto;
  align-items: center;
  width: 80%;
  line-height: 2em;
  display: flex;
  flex-direction: column;
}

.loggFelt{
  font-size: 25px;
  line-height: 1.2em;
  text-align: center;
  color: lightgrey;
  width: 80%;
  font-family: "Arial";
}
@media screen and (max-width: 850px){
.loggFelt{
  font-size: 20px;
}
#burger{
  color: #660000;
  display: flex;
  padding-top: 15px;
}
#overskrift{
  display: flex;
  justify-content: center;
}
nav{
flex-direction: column;
position: absolute;
transform: translate3d(-250px, 0, 0);
transition-property: all;
transition-duration: .6s;
top: 70px;
min-height: 100%;
background-color: #383838;

}
nav a{
  width: 210px;
  display: flex;
  justify-content: center;

}
#skifter:checked ~ nav{
transform: translate3d(0, 0, 0);
}
img.bilde{
  display: none;
}
}