CSSが反映されない

サイトの模写を行っております。初心者です。

CSSが反映されない原因がわからず困っております。
URL・反映されない箇所⓵～⓷はCSSのメモにて記載しております。
原因がわかる方がおりましたら、ご回答いただけると助かります。
よろしくお願い致します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>廃- before the time comes -</title>
    <link rel="stylesheet" href="廃.css">
  </head>
  <body>
<!--ヘッダー-->
   <header>
     <div class="header">
       <div class="logo"><span class="sp1">廃</span>- before the time comes -</div>
     </div>
   </header>
<!--メイン-->
   <main>
<!--メインビジュアル-->
     <div class="main_visual">
      <img src="C:\Users\subar\Desktop\廃 模写01\廃 模写回答\images\main_visual.jpg" alt="メインビジュアル">
     </div>
<!--メインコンテンツ-->
     <h1 class="h1"><span class="sp2">8</span>月の探訪</h1>
     <div class="contents">
<!--コンテンツ1-->
       <div class="contents-item">
         <div class="contents-img">
          <img src="C:\Users\subar\Desktop\廃 模写01\hokkaido.jpg">
         </div>
         <div class="contents-p">
          <p>北海道を旅行するのに最適な季節は8月をおいて他にない。</p>
          <p>トウモロコシ畑はいよいよ隆盛を極め、今正にその旬を謳歌しようとしている。</p>
          <p>そんな黄色の恵みを背に帯広から十数キロ北に車を走らせたところ、その場所は見えてきた。</p>
          <p>一面に広がる緑には、おおよそ商業的農業としての役割を全うしているであろう空間は1ヘクタールも見つからない。</p>
          <p>広大な庭の持ち主と、その隙間から覗く青空が伝える「夏」という言葉の解釈は、きっとまだどの辞書にも載っていないだろう。</p>
        </div>
       </div>
<!--コンテンツ2-->
       <div class="contents-item">
         <div class="contents-img">
          <img src="C:\Users\subar\Desktop\廃 模写01\printing_factory.jpg">
         </div>
         <div class="contents-p">
          <p>友人の誘いで訪れた印刷工場跡で見た階段はところどころ腐食が進んでおり、歩みを進めるたびにそう長くないであろう踏み板の寿命を感じさせる。</p>
          <p>こういった場所に来るたびに懐かしい感覚を覚えてしまうのはなぜだろう。手すりを掴んだ左手から香る酸化鉄は、逆上がりができずに半べそをかいていた時分を思い出させた。</p>
        </div>
       </div>
<!--コンテンツ3-->
       <div class="contents-item">
         <div class="contents-img">
          <img src="C:\Users\subar\Desktop\廃 模写01\hisuitouge.jpg">
         </div>
         <div class="contents-p">
          <p>長めに取った夏季休暇もいよいよ終わりに近づく某日、せっかく軽井沢に来ているのだからと、少し足を伸ばして翡翠峠に訪れた。</p>
          <p>眼前に広がる一本道は、トンネルを抜けて感じた温度差も相まっていっそう胃のあたりをざわつかせる。</p>
          <p>長らく手入れされていないであろう道だが、思った以上に歩みを阻む草が少ない理由に想像を巡らせ、一人笑みが溢れる。</p>
          <p>年を取るにつれ失うものは多くあれど、廃線を歩くという高揚感は、皆いくつになっても消えないらしい。</p>
        </div>
       </div>

     </div>
<!--サブナビゲーション-->
        <div class="subnabi">
           <a href="#"><span class="sp3">7</span>月の探訪</a>
        </div>
    </main>
<!--フッター-->
    <footer>
      <div class="footer-logo">
       <p class="footer">Copyright 廃墟探訪</p>
      </div> 
    </footer>
  </body>
</html>

/*模写中のサイト⇒https://krowl.jp/subjects/coding/sample001/*/

*{
font-family: serif;
margin:0px;
padding:0px;
}



.logo{
 color:white;
 padding:13px;
 margin:auto;
}

header{
 background-color:#543f32;
 height:80px;
}

.sp1{
 font-size:35px;
}

/*⓵この部分を横幅に合わせて拡大縮小したいが反映されない*/
.main_visual{
 width:100%;
 height:auto;
}

.h1{
 font-size:25px;
 color:#808080;
  /*⓶この部分の位置調整がうまくいかない*/
  text-align: center;
}

.sp2{
 font-size:35px;
 color:#808080;
}

.contents-p p{
 width:460px;
 margin:0.5px;
 padding-left:20px;
 color:#808080;
}

.contents-item{
 display:flex;
 padding-top:30px;
 /*⓷この部分の位置調整がうまくいかない*/
 text-align: center;
}

main{
 background-color: #f8f4e6;
}

.subnabi a{
    color:#808080;
    font-size:25px;
}

.sp3{
    color:#808080;
    font-size:35px;
}

.subnabi{
    text-align: center; 
    padding:35px;
}

.footer-logo{
    background-color: #8d6449;
    height:70px;
}

.footer{
    color:white;
    text-align: center;
    padding-top:20px;
}

m.ts10806

2020/08/11 20:52

本件と直接の関係は濃くはないのでこちらに記載しますが全角を含むファイルパスやローカルPCのフルパスはやめられたほうが良いです。「自分のPCでしか動作しない」コードにもなりますし問題の切り分けも複雑にします。

JunJun0829

2020/08/12 00:38

ご指摘ありがとうございます。全角を含む～とは、日本語の仕様を控えたほうがいいということでえしょうか？

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

回答1件

ベストアンサー

回答してみます。

⓵この部分を横幅に合わせて拡大縮小したいが反映されない

CSS
1/* 以下を追加してみてください。 */
2.main_visual img {
3  width: 100%;
4  display: block;
5}
6

②と③について、参考サイトを確認しました。
https://krowl.jp/subjects/coding/sample001/

参考サイトでいう以下のクラスについて、HTML側、CSS側で追加してください。

CSS
1.common-inner {
2    width: 960px;
3    margin: 0 auto;
4}

その上で、text-align: center;をコメントアウトしてみてください。

「.common-inner」のwidth: 960px;により横幅が960pxで固定され、
margin: 0 auto;により画面の中央に配置されます。

投稿2020/08/11 12:31

編集2020/08/11 12:42

new1ro

総合スコア4528

JunJun0829

2020/08/12 00:38

ご回答ありがとうございます。早速変更を加えて更新してみたのですが、レイアウトの変更はされませんでした。私のPCがおかしいのでしょうか・・？new1ro様のほうでは正常に中央にきている状態なのでしょうか？

rina

2020/08/12 01:18

横から失礼します。 HTML側にタグは追加されてますでしょうか？ の最初～の最後までを <div class="common-inner"><div>タグでくくってあげると、 new1roさんの回答でうまくいくかと思います。それでもうまくいかないようなら ①開発者ツールで変更したHTML,CSSが読み込まれているかを確認 ②質問に追記で今画面がどうなっているか、HTML,CSSを記載するといいかと思います。がんばってください。

JunJun0829

2020/08/12 05:35

ご回答ありがとうございます。 new1ro様のcss構文に加え、rina様のhtml構文を追加したら⓶⓷は改善されました！感動です・・。ありがとうございます。ただ、⓵メインビジュアルが反映されません。自分でももう少し調べて試行錯誤してみます。

JunJun0829

2020/08/12 09:45

問題解決しました！メインビジュアルのimgタグにclassを追加して、そこにcssを当てたら反映されました。アドバイスくださった方、ありがとうございました。

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