レスポンシブで要素（width100%)に取り消し線が入る

レスポンシブで、width100%入力してますが、取り消し線で反映がされていません。どういった原因が考えられますでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>WCB Cafe-Contact</title>
6    <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8
9    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
10    <link href="<link rel = "preconnect" href = "https://fonts.googleapis.com">
11<link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin>
12<link href = "https： //fonts.googleapis.com/css2？family = M + PLUS + Rounded + 1c：wght @ 700＆ display = swap "rel =" stylesheet ">
13<link href="css/stylesheet.css" rel="stylesheet">
14<link rel="icon" type="image/png" href="images/favicon.png">
15
16  </head>
17
18
19
20  <body>
21    <div id="contact" class="big-bg">
22    <header class="page-header wrapper">
23      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
24        <nav>
25          <ul class="main-nav">
26            <li><a href="news.html">News</a></li>
27            <li><a href="menu.html">Menu</a></li>
28            <li><a href="contact.html">Contact</a></li>
29          </ul>
30        </nav>
31    </header>
32
33    <div class="wrapper">
34      <h2 class="page-title">Contact</h2>
35      <form action="#">
36        <div>
37          <label for="name">お名前</label>
38          <input type="text" id="name" name="your-name">
39        </div>
40
41        <div>
42          <label for="email">メールアドレス</label>
43          <input type="email" id="email" name="your-email">
44        </div>
45
46        <div>
47          <label for="message">メッセージ</label>
48          <textarea id="message" name="your-message"></textarea>
49        </div>
50
51        <input type="submit" class="button" value="送信">
52      </form>
53    </div>
54</div>
55
56<section id="location">
57  <div class="wrapper">
58    <div class="location-info">
59      <h3 class="sub-title">カフェ東駅前店</h3>
60      <p>
61        住所：東京都○○区
62        ○○○○○○○○○○○○○○<br>
63        ○○○○○<br>
64        電話：03−111−11111<br>
65        営業時間：10:00〜20:00<br>
66        休日：水曜
67      </p>
68    </div>
69    <div class="location-map">
70      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3579.108632246164!2d127.69286871503041!3d26.22565958342822!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34e56bda1815ec15%3A0x19878b55152eae59!2z44K144Oz44Ko44O86YKj6KaH44Oh44Kk44Oz44OX44Os44Kk44K5!5e0!3m2!1sja!2sjp!4v1626920649624!5m2!1sja!2sjp" width="800" height="400" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
71    </div>
72</div>
73</section>
74
75<section id="sns">
76<div class="wrapper">
77  <div class="sns-box">
78    <h3 class="sub-title">Facebook</h3>
79    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=340&height=315&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId" width="340" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
80  </div>
81
82  <div class="sns-box">
83    <h3 class="sub-title">Twitter</h3>
84    <a class="twitter-timeline" data-height="315" href="https://twitter.com/tocho_koho?ref_src=twsrc%5Etfw">Tweets by tocho_koho</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
85  </div>
86
87  <div class="sns-box">
88    <h3 class="sub-title">YouTube</h3>
89    <iframe width="560" height="315" src="https://www.youtube.com/embed/02azSAMtZWU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
90  </div>
91
92</div>
93
94</section>
95
96  <footer>
97  <div class="wrapper">
98    <p><small>&copy;2019 Manabox</small></p>
99  </div>
100
101  </footer>
102
103
104
105
106  </body>
107
108</html>
109

css
1@media (max-width: 600px) {
2    .page-title {
3        font-size: 2.5rem;
4    }
5
6
7    .page-header {
8        flex-direction: column;
9        align-items: center;
10    }
11
12
13
14    .main-nav {
15        font-size: 1rem;
16        margin-top: 10px;
17    }
18    .main-nav li {
19        margin: 0 20px;
20    }
21
22
23    .home-content {
24        margin-top: 20%;
25    }
26
27
28.news-contents {
29  flex-direction: column;
30    }
31    article,
32    aside {
33      width: 100%;
34    }
35
36    #news .page-title {
37      margin-top: 30px;
38    }
39    aside {
40      margin-top: 60px;
41    }
42
43    .post-info {
44      margin-bottom: 30px;
45    }
46
47    .post-date {
48      width: 70px;
49      height: 70px;
50      font-size: 1rem;
51    }
52
53    .post-date span {
54      font-size: 0.875rem;
55      padding-top: 2px;
56    }
57
58    .post-title {
59      font-size :1.375rem;
60    }
61
62    .post-cat {
63      font-size: 0.875rem;
64      margin-top: 10px;
65
66    }
67
68    .post-title,
69    .post-cat{
70      margin-left: 80px;
71    }
72
73    /* MENU */
74    .menu-content {
75      margin-top: 20%;
76    }
77
78    .big-box {
79      grid-column: auto;
80      grid-row: auto;
81    }
82
83    .big-box img {
84      height: auto;
85    }
86
87    #contact .page-title{
88      margin-top :40px;
89    }
90
91/* **### ↓この、width１００％が反映しません** */
92
93    input[type="text"],
94    input[type="email"],
95    textarea {
96      max-width: 100%;
97    }
98
99    #location .wrapper,
100    #sns .wrapper {
101      flex-direction: column;
102    }
103
104    .location-info,
105    .location-map,
106    .sns-box{
107      width: 100%
108    }
109  .sns-box {
110    margin-bottom: 30px;
111  }
112
113}
114

miyabi_pudding

2021/07/22 05:11

メディアクエリーではない箇所のCSSが影響している可能性が大なので、メディアクエリー外のCSSも記載してください。

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

回答1件

ベストアンサー

様々な原因が考えられますが、
より優先度が高いセレクタによって、同プロパティの値が定義されているが主だった原因かと。
メディアクエリは、優先度が高くなるわけではありません。
よって、他のスタイル同様、
優先度がより高いスタイルが当たっている場合、有効になりません。
なので、下記措置のいずれかを検証し、実施してください。