JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Ma page fitness</title>
   <script src="script.js"></script>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/style.css" media="all"/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
</head>
<body>
  <section>
    <header>
      <nav>
        <div>
          <ul>
          <li><a href="#">Fitness</a></li>
          </ul>
        </div>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">How It Works</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">FAQ</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div class="bg">
       <img src="https://s22.postimg.cc/rquyaaf5d/Layer-25.jpg">
    </div>
  </section>
  <section>
    nouvelle section
  </section>
</body>
</html>

CSS

/* header */

header{
  position: relative;
}

header nav{
  border: 1px solid green;
  /* position */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* display */
  display: flex;
  justify-content: space-between;
}

nav ul li {
  display: inline-block;
}

.bg img{
width: 100%;
}