I can't move an image when it comes to responsive design CSS

So I have a nav bar on top, with 1 logo, 3 text elements and 1 button. The thing is, when I make it smaller I want the button to be gone, the element text to remain in place, and the logo to go on the bottom right screen.

I did most of the things, but I can’t make the logo go where I want. My code looks like this :

<header>    

        <img class="logo" src="/Assets/Logo.png" alt="logo">

        <nav>

            <ul class = "links">

                <li><a href="#">Home</a></li>

                <li><a href="#">Recipes</a></li>

                <li><a href="#">About</a></li>

            </ul>

        </nav>

        <a class="cta" href="#"><button>Youtube</button> </a>

       

    </header>

And the CSS

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

    .logo {

        position: fixed;

        bottom: 0;

        right: 0;

        width: 300px;    

    }

  }

The thing is, the logo gets fixed on the TOP right corner instead of the bottom one. What am I doing wrong?

What do you mean by the bottom right screen, the bottom right of the viewport?

Its position is relative to the viewport, or an ancestor with a transform value other than none. Does one of the ancestors have transform on it?

You likely will have to post a live example on something like Codepen so we can see what is going on.

Codepen https://codepen.io/PhantasmPNT/pen/ZEXeBGx

Can’t believe I found the solution. The problem was that I already have another media query to the image with other settings and yea…I’m stupid.