表題の通り、itemに width: 100%;加えても、横いっぱいに広がらない

前提・実現したいこと

表題の通り、itemに width: 100%;加えても、横いっぱいに広がらないです。

@media screen and (max-width: 599px) {}の時に横いっぱいに広げたいです。

何卒宜しくお願い致します。

イメージは以下の写真のようにです

発生している問題・エラーメッセージ

エラーメッセージ

試したこと

aタグに display：block;を使い、width設定→✖
ここから疑問に感じ始めました。
2.liにwidthを設定しても反応はなしです

何が原因で、反応がしないのか、躓きました

該当のソースコード

HTML
1  <section class="news">
2            <div class="ineer">
3                <div class="sec-theme aos-init aos-animate" data-aos="zoom-in">
4                    <img src="./img/logo02.png" alt="ロゴ">
5                    <p class="cmn-ttl">お知らせ</p><!-- /.cmn-ttl -->
6                </div><!-- /.sec-theme -->
7                <div class="news-link aos-init aos-animate" data-aos="zoom-in">
8                        <a href="#">
9                            <p class="sale-info">営業情報</p>
10                        </a>
11                        <a href="#"><p>その他</p></a>
12                      
13                </div><!-- /.news-link -->
14                <!--1-->
15                <ul class="news-list aos-init aos-animate" data-aos="fade-right">
16                    <li class="news-item">
17                        <a href="" class="">
18                            <img class="news-img" src="./img/news01.jpg" alt="news02">
19                            <div class="news-txt">
20                                <time>2020.12.24</time>
21                                <p class="news-desc">年末最後の営業日は27日になります。</p><!-- /.news-desc -->
22                            </div><!-- /.news-txt -->
23                        </a>
24                    </li><!-- /.news-item -->
25                    
26                    <li class="news-item">
27                        <a href="" class="">
28                            <img src="./img/news02.jpg" alt="news02">
29                            <div class="news-txt">
30                                <time>2020.12.24</time>
31                                <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc -->
32                            </div><!-- /.news-txt -->
33                        </a>
34                    </li><!-- /.news-item -->
35                </ul><!-- /.news-list -->
36                <!--2-->
37                <ul class="news-list aos-init aos-animate" data-aos="fade-right" >
38                    <li class="news-item">
39                        <a href="" class="">
40                            <img class="news-img" src="./img/news02.jpg" alt="news02">
41                            <div class="news-txt">
42                                <time>2020.12.11</time>
43                                <p class="news-desc">12.21は臨時休業とさせていただきますので、よろしく お願いします。</p><!-- /.news-desc -->
44                            </div><!-- /.news-txt -->
45                        </a>
46                    </li><!-- /.news-item -->
47                    <li class="news-item">
48                        <a href="" class="">
49                            <img src="./img/news01.jpg" alt="news01">
50                            <div class="news-txt">
51                                <time>2020.12.24</time>
52                                <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc -->
53                            </div><!-- /.news-txt -->
54                        </a>
55                    </li><!-- /.news-item -->
56                </ul><!-- /.news-list -->
57                <!--3-->
58                <ul class="news-list aos-init aos-animate" data-aos="fade-right" >
59                    <li class="news-item">
60                        <a href="" class="">
61                            <img src="./img/news01.jpg" alt="news01">
62                            <div class="news-txt">
63                                <time>202.12.01</time>
64                                <p class="news-desc">和室の改装を行いますため、12.10はお休み させていただきます。</p><!-- /.news-desc -->
65                            </div><!-- /.news-txt -->
66                        </a>
67                    </li><!-- /.news-item -->
68                    <li class="news-item">
69                        <a href="" class="">
70                            <img src="./img/news02.jpg" alt="news02">
71                            <div class="news-txt">
72                                <time>2020.12.24</time>
73                                <p class="news-desc">年末最後の営業日のお知らせ</p><!-- /.news-desc -->
74                            </div><!-- /.news-txt -->
75                        </a>
76                    </li><!-- /.news-item -->
77                </ul><!-- /.news-list -->
78            </div><!-- /.ineer -->
79        </section><!-- /.news -->

CSS
1.news {
2  background-color: #ffffff;
3}
4
5@media screen and (min-width: 600px) and (max-width: 1179px) {
6  .news {
7    margin: 0 auto;
8    padding: 0 25px;
9  }
10}
11
12@media screen and (max-width: 599px) {
13  .news {
14    padding: 0 25px;
15  }
16}
17
18.news-link {
19  display: -webkit-box;
20  display: -webkit-flex;
21  display: -ms-flexbox;
22  display: flex;
23  -webkit-box-pack: center;
24  -webkit-justify-content: center;
25      -ms-flex-pack: center;
26          justify-content: center;
27  -webkit-box-align: center;
28  -webkit-align-items: center;
29      -ms-flex-align: center;
30          align-items: center;
31}
32
33.news-link > a {
34  display: block;
35  margin: 46px 26px 49px;
36}
37
38.news-link > a .sale-info {
39  padding-bottom: 1px;
40  border-bottom: 1px solid #000;
41}
42
43.news .news-list {
44  display: -webkit-box;
45  display: -webkit-flex;
46  display: -ms-flexbox;
47  display: flex;
48  -webkit-box-pack: center;
49  -webkit-justify-content: center;
50      -ms-flex-pack: center;
51          justify-content: center;
52  width: calc(100% - 40px*1);
53}
54
55@media screen and (max-width: 599px) {
56  .news .news-list {
57    width: calc(100vw -50px);
58    display: -webkit-box;
59    display: -webkit-flex;
60    display: -ms-flexbox;
61    display: flex;
62    -webkit-box-orient: vertical;
63    -webkit-box-direction: normal;
64    -webkit-flex-direction: column;
65        -ms-flex-direction: column;
66            flex-direction: column;
67  }
68}
69
70.news .news-list .news-item {
71  background-color: #F6F6F6;
72  display: block;
73  /* height:60px;
74            margin:0px; */
75  max-width: calc(50% - 40px);
76  min-width: 34%;
77  margin-top: 49px;
78  margin-bottom: 20px;
79  display: -webkit-box;
80  display: -webkit-flex;
81  display: -ms-flexbox;
82  display: flex;
83  -webkit-box-align: center;
84  -webkit-align-items: center;
85      -ms-flex-align: center;
86          align-items: center;
87  word-break: break-all;
88  /*  margin-top: 49px;
89            margin-bottom: 20px;
90            display: flex;
91            align-items: center; */
92}
93
94.news .news-list .news-item:nth-child(2n) {
95  margin-left: 40px;
96  width: calc(50% - 40px*1/2);
97}
98
99@media screen and (min-width: 600px) and (max-width: 1179px) {
100  .news .news-list .news-item {
101    width: calc(50% - 20px*1/2);
102  }
103}
104
105@media screen and (max-width: 599px) {
106  .news .news-list .news-item {
107    width: 100%;
108  }
109}
110
111.news .news-list .news-item > a {
112  display: -webkit-box;
113  display: -webkit-flex;
114  display: -ms-flexbox;
115  display: flex;
116}
117
118.news .news-list .news-item > a > img {
119  width: 80px;
120  height: 80px;
121  padding: 15px 10px;
122}
123
124@media screen and (max-width: 599px) {
125  .news .news-list .news-item > a > img {
126    width: 100px;
127    height: 100px;
128  }
129}
130
131.news .news-list .news-item > a .news-txt time {
132  padding: 15px 10px;
133}
134
135.news .news-list .news-item > a .news-txt .news-desc {
136  padding-top: 10px;
137}

補足情報（FW/ツールのバージョンなど）

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

回答1件

.news .news-list .news-item に対するメディアクエリ外の設定が生きていますので、それをメディアクエリ内で上書きする必要があります。

css
1@media screen and (max-width: 599px) {
2  .news .news-list .news-item {
3    width: 100%;
4  }
5}

上記の部分を下記に修正してください。

css
1@media screen and (max-width: 599px) {
2  .news .news-list .news-item:nth-child(n) {
3    width: 100%;
4    max-width: calc(100% - 40px);
5    margin-left: 0;
6  }
7}

投稿2021/10/09 23:59

hatena19

総合スコア33715

free_teku

2021/10/10 00:29

ご回答ありがとうございます！上書きの際の対処法をお聞かせできたら、幸いです。というのも。他のscssが優先されて、設定できないことがあるからです。正直、今上記のコードを書くことができない状況のため、確認ができません！が、他の要素の際にも、対処できる上書き方法についてご教授いただけると幸いです

hatena19

2021/10/10 00:37 編集

複雑なCSSになると、ある要素にどのCSSが効いているのかの判断は、コードを読むだけでは難しくなりますので、ブラウザの検証ツールを使うと、それが簡単に分かりますので、それで必要なものを上書きするようにします。 CSSは後に記述したもの、セレクターの詳細度が高いものが優先されますので、それを考慮して上書きされるようにします。

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