CSS media query and responsive design not working

Hey I am working on a responsive design for a project I have started. I have the codes here I will post on this thread. Basically when I scale down my viewport it only goes to 500px wide no less. How do I make it go smaller so it matches my phones dimensions? Also even when I scale to the smallest I can go the websites nav goes shrinks down and collapses one block down and I would like to make it in to a standard unordered list again. When I add my media query it does not change the nav to no background color as I had intentionally removed for that query… I even commented out the meta view-port data and zero changes occurred.

Here is the html and css for my project. Any help is appreciated, thanks

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
        <link rel="stylesheet" href="MB Inspiration.css" type="text/css">
        <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
    </head>

    <nav class="topnav">
        <ul style="border: 2px, whitesmoke;" >
            <li><a href="Mountain Bikes.html"style="font-family: 'Great Vibes', cursive; font-size: 50px; color: whitesmoke;">Home</a></li>
            <li class="active"><a href="MB Inspiration.html"style="font-family: 'Great Vibes', cursive; font-size: 50px; color: whitesmoke;" >Inspiration</a></li>
            <li><a href="Shop Mountain Bikes.html"style="font-family: 'Great Vibes', cursive; font-size: 50px; color: whitesmoke;">Shop Mountain Bikes</a></li>
        </ul>
    </nav>

    <div class="container1">
    <body>
        <div id="filmstrip">
            <h1 class="videos">Videos</h1>
        </div>
        <div>
            <h1 id="freeride" style="font-family: 'Great Vibes', cursive; font-size: 50px; color: whitesmoke;">Freeride</h1>
            <iframe id="videos" width="1280" height="720" src="https://www.youtube.com/embed/El0emlsO0q4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <br>
            <h3 style="font-family: 'Great Vibes', cursive; font-size: 50px; color: whitesmoke;">Slopestyle</h3>
            <iframe id="videos" width="1280" height="720" src="https://www.youtube.com/embed/pYkC4emEUaU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 
        </div>      
    </body>
    </div>
</html>
* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

div.container1 {
    background-image: url("./images/MB Inspiration background.jpg");
    position: relative;
    background-color: grey;
} 

.videos {
    font-size: 8.125rem;
    position: absolute;
    top: 5.3125rem;
    right: 2.1875rem;
    left: 2.75rem;
    bottom: 3.75rem;
    margin: 0;
    width: 100%;
    z-index: 0;
    color: black;
    font-family: arial;
    
    
}

 div #filmstrip {
    background-image: url("./filmstrip.jpeg");
    height: 18.75rem;
    width: 29.875rem;
    position: relative;
    top: 3.125rem;
}


ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: black;
    
}


li {
    float: left;
    color: white;   
}


a {
    display: block;
    padding: 2.1875rem;
    font-size: 2.8125rem;
    color: white;
    
}


li a:hover {
    background-color: grey;
}


.active {
    background-color: rgb(87, 84, 84);
}


.topnav {
    overflow: hidden;
    background-color: #f1f1f1;
    width: 100%;
  }
  
  .topnav a {
    float: left;
    display: block;
    text-align: center;
    padding: .875rem 1rem;
    text-decoration: none;
    font-size: .9411764706rem;
    border-bottom: .1875rem solid transparent;
  }
  
  .topnav a:hover {
    border-bottom: .1875rem solid whitesmoke;
  }
  
  .topnav a.active {
    border-bottom: .1875rem solid whitesmoke;
  }

  #videos {
     max-width: 100%;
      
  }

  @media only screen and (min-width: 200px) and (max-width: 815px) and (min-height: 480px), (orientation: landscape) {
      body {
          width: 100%;
      }
       
      .topnav {
          width: 100%;
      }

      ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

    li {
        float: left;
        color: white;   
    }
  }

What happens if you add an and here:

@media only screen and (min-width: 200px) and (max-width: 815px) and (min-height: 480px), 
                                                                                        ^
                                                                                        |
                                                                                      and

It didn’t make any difference but I will show you what it looks like through a mobile phone emulator.

As you can see the website still scrolls to the left and right when I scale down and it shows a white bar where it cuts off the body on the right side when I do scroll to the right.

I think I will start a new project fresh and see if it works out better