First of all, you will have to refactor the global CSS by using flex and grid which are the standard for responsive design. It is way more simple and powerful than using floats and other ancient stuff:

<header class="header">
  <img src="..." />
  <nav> ... </nav>
</header>

.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;
}

With justify-content: space-between you tell the container that the elements inside of it (.logo and nav) will be spaced, the first (logo) at the left and the second (nav) at the right, no need to use float. The property works only if you set display: flex. With align-items: center; you tell the flex container how you want to vertically align your items.

Then, you can assign a class to ul and populate it as follows:

.list {
  display: grid;
  grid-auto-flow: column;
  list-style-type: none;
  column-gap: 20px;
  padding: 0;
}

Here you're telling to <ul> element that all the <li> elements inside of it, should compose a grid of n columns as many <li> elements and that you want 20px of space between each of them. The property column-gap works only if you set display: grid. The padding should always be 0 or the browser will add some padding by default. You don't want it so you specify 0.

Now, you can use a powerful combo to set the width of the list items by creating a class and assigning it to your <li> elements:

.listItem {
  width: min-content;
  white-space: nowrap;
}

Here you're just telling to the list items that their width should be automatic, based on the words length. With white-space: nowrap you're telling to the list items that you never want the text to start a new line after a space. For example, "GUIDES ET ASTUCES" will always be placed on a single line. At the same time you're also setting the width for each column of the grid created before.

Now, create a button and wrap it together with the logo in a new div:

    <div class="mobileHeader">
      <img src="images/GameStar-Blanc.png" alt="logo" class="logo">
      <button class="hamburger">Menu</button>
    </div>

Basically, this will be your mobile header with the logo on the left and the button on the right. The menu will be placed below.

Create a global CSS rule and tell the button you never want to display it:

.hamburger {
  display: none;
}

Now for the mobile menu, you should change the appearance of the <nav> container and all its child element that you want to change. From now on your code should be wrapped around a media query, place the media queries at the bottom of your CSS file or at least, below the rules defined before:

@media screen and (max-width: 800px) {
  // CSS code
}

Create another CSS rule targeting all the devices with a max resolution of 800px:

@media screen and (max-width: 800px) {
    .hamburger {
      display: block;
    }
}

In short, you just said: "The menu button should always be hidden, but when a device has a width from 0 to 800px, I want to display it.

Now create another rule inside the media query @media screen and (max-width: 800px) and do the same you did for the header:

.mobileHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

Basically you want that a certain width, the header is something like:

Now you should have two elements inside your <header>, <div> and <nav>, let's create a rule and tell the header that you would like to display those elements one below the other:

.header {
  flex-direction: column;
  padding: 20px;
}

Basically it is just like grid-auto-flow: row for grids.

Now do the same for the list, this time you want the opposite, you want that all the items will compose a grid with n rows and just one column:

.list {
  grid-auto-flow: row;
  list-style-type: none;
  row-gap: 40px;
  column-gap: 0;
  justify-items: center;
}

With justify-items: center you're instructing the list to center the list items. It works only with display: grid, since you set display: grid in a global rule, you don't need to write it again as long as you don't need to change it.

Now assign a class to your <nav> and enter another rule in the media query:

.menu {
   display: none;
}

Since your menu should be hidden when an user visits the website on mobile, it should be set on display: none by default.

Now, set a rule to target only devices with a width of 801 px and more with (min-width: 801px):

@media screen and (min-width: 801px) {
  .menu {
    display: block !important;
  }
}

No matter what, you always want the menu to be displayed for devices which have a resolution wider than 800px.

Now, if you shrink your window the mobile menu should be vanished and here you need a bit of JS to open and close it, I am not going into the details since your question is totally related to CSS and I will only confuse you by going deeper but you will find everything in the pen I made for you.

https://codepen.io/alienopolis/pen/NWapXWZ

Finally, I would recommend you to take this free tutorial which covers everything you need to know about responsive design with CSS:

https://www.freecodecamp.org/news/css-flexbox-and-grid-tutorial/

HTML

<header class="header">
  <div class="mobileHeader">
    <img src="images/GameStar-Blanc.png" alt="logo" class="logo">
    <button onclick={openMenu()} class="hamburger">Menu</button>
  </div>
  <nav class="menu">
    <ul class="list">
      <li class="listItem"><a href="#">A LA UNE </a></li>
      <li><a href="#">L'ACTUALITE</a></li>
      <li><a href="#">GUIDES ET ASTUCES</a></li>
      <li><a href="#">PROCHAINEMENT</a></li>
    </ul>
  </nav>
</header>

CSS

body {
  width: 90%;
  height: 800px;
}

.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  background: #583760;
  align-items: center;
  padding: 20px 60px;
}


.logo {
  color: white;
}

.list {
  display: grid;
  grid-auto-flow: column;
  list-style-type: none;
  column-gap: 40px;
}

.listItem {
  width: min-content;
  white-space: nowrap;
}

nav a {
  color: white;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: black;
}

.hamburger {
  display: none;
}

@media screen and (min-width: 801px) {
  .menu {
    display: block !important;
  }
}

@media screen and (max-width: 800px) {

  .header {
    flex-direction: column;
    padding: 20px;
  }

  .mobileHeader {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .hamburger {
    display: block;
  }

  .menu {
    display: none;
  }

  .list {
    grid-auto-flow: row;
    list-style-type: none;
    row-gap: 40px;
    column-gap: 0;
    justify-items: center;
  }
}

JS

const menu = document.querySelector(".menu");
let open;

function openMenu() {
  if (open) {
    menu.style.display = "none";
    open = false;
  } else if (!open) {
    menu.style.display = "block";
    open = true;
  }
}