css媒体查询不起作用

问题遇到的现象和发生背景

设计一个导航栏，当宽度小于300px时，导航栏内容变为竖直排列

问题相关代码，请勿粘贴截图
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>Documenttitle>
    <link rel="stylesheet" href="style.css"> 
head>
<body>
   <nav class="nav">
    <ul>
        <li class="class1">首页li>
        <li class="class2">博客li>
        <li class="class3">联系我li>
        <li class="class4">留言板li>
        <li class="class5">关于我li>
        <li class="class6">照片墙li>
    ul>
   nav>
body>
html>


*{
    margin: 0;
    padding: 0;
    color: white;
}

.nav {
    background-color:#6666cc;
} 
.nav ul {
    margin: 0;
    padding: 0;
         } 
         
.nav li { 
    margin: 5px 90px 5px 90px;
    padding: 0; 
    list-style: none;
    display: inline-block;
 } 


@media screen and (max-width:300x){
    .nav {
        position: relative;
        width: 100%;
        background-color:#6666cc;
    } 
 
             
    .nav li { 
        list-style: none;
        float: none;
     } 
    
    
}
运行结果及报错内容

不管怎样收缩，媒体查询中的内容始终没有起作用，第一次使用媒体查询，不知道问题在哪里

你是单位那里自己打少了一个p

img

img