レスポンシブデザイン　適用されない

767px以下の時にナビバーの要素の１つ１つの幅を50％にしようと思ったのですが適用されません。この解決法を知りたいです。

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  <title>Document</title>
8  <link rel="stylesheet" href="css/html5reset-1.6.1.css">
9  <link rel="stylesheet" href="css/practice.css">
10  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
11  <link rel="stylesheet" href="css/responsive.css">
12</head>
13<body>
14
15<header>
16  <div class="container">
17    <div id="top-wrapper">
18
19      <div id="shopName">
20        <img src="https://haniwaman.com/sample/part3/template_08/common/images/siteTitle.png" alt="">
21      </div>
22      <div id="right-header">
23        <p>"地域に根付いた歯科医院"デンタルクリニック</p>
24        <div id="tel">
25          <h2><i class="fas fa-tty"></i>03-0000-0000</h2>
26        </div>
27        <div id="opened">
28          <p>予約受付時間 10:00~19:30 <span>日祝 休診</span></p>
29        </div>
30      </div>
31    </div>
32    <nav id="introduction">
33      <div class="top-nav child"><a href="">トップページ<br class="english">HOME</a></div>
34      <div class="top-nav child"><a href="">医院紹介<br class="english">CLINIC</a></div>
35      <div class="top-nav child"><a href="">診察案内<br class="english">SERVICE</a></div>
36      <div class="top-nav child staff"><a href="">院長・スタッフ紹介<br class="english">STAFF</a></div>
37      <div class="top-nav" id="top-nav-last-child"><a href="">アクセス<br class="english">ACCESS</a></div>
38    </nav>
39
40  </div>
41
42</header>

css
1*{
2  box-sizing:border-box;
3}
4
5body{
6  border-top: 10px solid #6CC6C4;
7  background-color: #F6F6F6;
8}
9
10.container{
11  /* width: 100%; */
12  padding:10px 170px 10px 170px;
13}
14
15#top-wrapper{
16  display: flex;
17}
18
19header{
20  color:#696969;
21}
22
23header img{
24  margin-top: 40px;
25}
26
27#right-header{
28  margin-left: auto;
29}
30
31#right-header p{
32  font-size: 10px;
33}
34
35#right-header h2{
36  font-weight: normal;
37}
38
39#right-header i{
40  margin-right: 5px;
41}
42
43#right-header span{
44  color:red;
45}
46
47#tel{
48  margin-top: 30px;
49}
50
51#tel h2{
52  font-size: 25px;
53}
54
55
56#opened{
57  margin-top: 10px;
58  border: 1px solid #dcdcdc;
59  padding:10px 20px 10px 20px;
60}
61
62#introduction{
63  display: flex;
64  margin-top: 30px;
65  width: 100%;
66  border: 2px solid #6cc6c1;
67  border-radius: 5px;
68  background-color: #6cc6c4;
69}
70
71#top-nav-last-child{
72  border-right: none;
73}
74
75.child{
76    border-right:1px solid #595959;
77}
78
79#introduction .top-nav{
80  padding: 20px 0px 20px 0px;
81  background-color: #6CC6C4;
82  width: 20%;
83
84  white-space: nowrap;
85
86}
87
88#introduction .top-nav a{
89  text-decoration: none;
90  color:white;
91  font-size: 13px;
92  font-weight: bold;
93  display: block;
94  text-align: center;
95}
96
97#introduction a:hover{
98  opacity: 0.6;
99}
100

css
1@media(max-width: 767px) {
2
3
4
5#top-wrapper{
6  display: flex;
7  flex-direction: column;
8  text-align: center;
9}
10
11.top-nav{
12  width: 50%;
13}
14
15#right-header{
16  margin-left: 0px;
17}
18
19}

試したこと
・responsive.cssを再読み込みしてみた
・ググったがwidthを50%にするとしか書いていなかった

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

回答1件

ベストアンサー

CSS
1#introduction{
2  flex-wrap: wrap;
3}

【flex-wrap - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

投稿2020/02/05 04:27

kei344

総合スコア69606

koko122102

2020/02/05 04:55

迅速なご対応ありがとうございます。申し訳ございません、flex-wrap:wrap;にしてみたのですが結果は変わりませんでした。試しにデベロッパーツールを起動させると #introduction .top-nav { padding: 20px 0px 20px 0px; background-color: #6CC6C4; width: 20%; white-space: nowrap; } @media (max-width: 767px) .top-nav { width: 50%;←この部分には取り消し線みたいな物が引かれていた｝このように表示されwidth:50%;が適用されていませんでした。何か間違っているところはあるでしょうか？