レスポンシブデザインが反映されない

以下のコードで作業進めているのですがレスポンシブデザインが反映されず画面を縮小しても全く変わりません。どうすれば良いのでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <link rel="stylesheet" type="text/css" href="test.css">
8    <meta name="viewport" content="width=device-width,initial-scale=1.0">
9<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css">
10    <title>模写1</title>
11    
12</head>
13<body>
14
15            <!--##############header##################-->
16    <div class="head">
17
18            <a href="#">
19            <img class="logo" src="logo.jpeg" a href="#" height="30px " width="30px ">
20            </a>
21            <ul>
22            <li class="month">予想月収</li>
23            <li><h4>¥151,550</h4></li>
24            <li><a class="b2" href="#">はじめる</a></li></ul>
25    </div>
26

CSS
1/****************************
2header
3****************************/
4.logo{align-items: center;
5    margin-left: 20px;}
6.head ul{list-style: none;}
7@media screen and (max-width: 460px){
8    .head ul{display: none;}
9    }
10.head .b2{border: 1px solid orangered;
11        color: white; 
12        background-color: orangered; 
13        border-radius: 6px;
14        padding: 6px 14px 6px 12px;
15        text-decoration: none;}
16.head a:hover{text-decoration: none; color: white;}
17.head {
18    display: flex;
19    align-items: center;  
20  }
21  .head ul{
22    list-style: none;
23    display: flex;
24    align-items: center;
25    margin-left: auto;
26  }
27  .head>ul>li{
28  margin-right: 10px;}

行動規範の内容に同意します

回答2件

ベストアンサー

CSSは後に記述したほうが優先度か高いので、後に記述してあるdisplay: flex;が適用されます。

css
1@media screen and (max-width: 460px){
2    .head ul{display: none; /*無視される*/}
3    }
4
5中略・・・
6
7  .head ul{
8    list-style: none;
9    display: flex; /*これが適用される*/
10    align-items: center;
11    margin-left: auto;
12  }