Image not moving to the center when using "position: absolute"

I'm following this tutorial and on 26:30 the tutor moves the .png logo image to the center of the screen by using "position: absolute". I'm not able to achieve the same result - my image stays on the right of the screen. My font and image is different than the tutor's, but the font is Regular 400 and the image is 250x250 .png, just like the tutor's.

Here's my html and css:

body {
    display: flex;
    align-items:center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

body {
    background-color: #5c71e9;
}

#game-board {
    border-radius: 100px;
    display: grid;
    grid-template-columns: repeat(20, 20px);
    grid-template-rows: repeat(20, 20px);
    margin: 5px;
}

.game-border-1 {
    border: #010101 solid 10px;
    border-radius: 30px;
    box-shadow: inset 0 0 0 10px #010101;
}

.game-border-2 {
    border: #454344 solid 8px;
    border-radius: 26px;
    box-shadow: inset 0 0 0 10px #454344;
}

.game-border-3 {
    border: #b2b3b5 solid 30px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 5px #b2b3b5;
    background-color: #010101;
}

#instruction-text {
    position: absolute;
    top: 62.5%;
    color: #fefdf9;
    text-shadow: #b2b3b5 0px 3px 0px;
    width: 400px;
    font-size: 25px;
    text-align: center;
    text-transform: capitalize;
    padding: 30px;
    margin: 0;
}

.scores {
    display: flex;
    justify-content: space-between;
}

#score {
    color: #fefdf9;
}

#score,
#highScore {
    font-size: 40px;
    font-weight: bolder;
    margin: 10px 0;
}

#highScore {
    color: #010101;
    display: none;
}

.snake {
    background-color: #fefdf9;
    border: #454344 1px dotted;
}

.food {
    background-color: #ff0000;
    border: #fefdf9 5px solid;
}

#logo {
    position: absolute;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap" rel="stylesheet">
        <title>Snake</title>
        <link rel="stylesheet" href="style.css">
        <script src="script.js" defer></script>
    </head>
    <body>
        <div>
            <div class="scores">
                <h1 id="score">000</h1>
                <h1 id="highScore">000</h1>
            </div>
            <div class="game-border-1">
                <div class="game-border-2">
                    <div class="game-border-3">
                        <div id="game-board"></div>
                    </div>
                </div>
            </div>
        </div>
        <h1 id="instruction-text">Press "Space" to start!<h1>
        <img id="logo" src="game-logo.png" alt="snake-logo">
    </body>
</html>

Any idea where the problem could be? I'm super new to HTML and CSS, so sorry if this is an easy one to solve.

I've tried changing the font to the one that the tutor uses and the image to the one that the tutor uses, but that didn't solve the issue. Tried using different "position" types, but that didn't help too.

Here's how the screen currently looks: image not in the center

Solution

you can style image #logo by add this to your style.css file:

#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}