alignement texte e n css par renoven - page 1

Bonjour,

Ayant centrer le texte, le menu à disparu pourquoi?

https://www.youtube.com/watch?v=MzAeV2BdzRg&list=LLVKiqLGH9ibSBVq4a50GmbQ&index=2&t=781

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Photographie de rue</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
  <link rel="stylesheet" href="src/css/main.css">
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
 
</head>
<body>
 <div class="block">
     <header class="header">
        <a href="#" class= "header-logo">Mon Portfolio </a>
        <nav class="header-menu">
            <a href="#">Accueil</a>
            <a href="#">A propos</a>
            <a href="#">Mes travaux</a>
            <a href="#">Contact</a>

        </nav>



     </header>




 </div>

 <div class="block">
        <div class="banner">
            <img src="src/img/img.jpg" alt="Photo noir et blanc" class="banner-image">
          <div class="banner-content">
              <h1 class="title is-1">Bienvenu sur Mon Portfolio></h1>
              <h2 class="subtitle">Découvrez mes travaux photographiques</h2>
              <button class=" button is-link">Contactez-moi</button>
   </div>
         
    
 </div>


 </div>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="src/js/main.js"></script>
  ...
</body>
</html>

.header{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 70px;
    line-height: 70px;
    background-color:rgba(0, 0,0, 0);
    position: fixed;
    top: 0;
  
}

.header .header-logo {

    color: red;
    font-family:'Abril Fatface', cursive;
    float : left;
    margin-left: 30px;

}

.header .header-menu{

    float: right;
    margin-right: 30px;

}
.header .header-menu a {

    margin-left: 15px;
    color: black;
}

.header .header-menu a {

    margin-right: 15px;
    color: black;

}
.header .header-menu :hover {

    color:#f1c40f;
}

.banner {
    margin-top: -20px; 
}
.banner{
    margin-top: -20px;
}

.banner .banner-image {

    position: relative;
}

.banner .banner-content {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 70%;
}