CodePenでは正常、Bracketsでは表示が変わる

現在、クリ★スタ様の「デザインカンプ初級編」でコーディングの勉強をしています。
使用しているエディタはBracketsです。

タイトルの通りですが、Bracketsで直接打ち込んだコードの一部が、正しく表示されずに困っています。具体的には、HTMLは正常に表示されますが、それに対するcssの一部が正しく適用されません。

最初はコーディングのミスだと思い（クリ★スタ様の正解通りの書き方ではなく、class名を減らして子孫セレクタを使用したりして独自の書き方をいれながら作っていたので）、色々試したり調べてみたりしたのですがわからず、試しにBracketsに書いたものをCodePenにコピペしたみたところ、望んでいた通りの正しい表示がされました。

実は、先日も別の箇所でうまくいかず、全く同じ内容でCodePenに打ち込んだところ、正しい表示になったことがありました。その際はCodePenに改めて打ち込んだものをBracketsにコピペしてみて、正しい表示になったので、何度か見比べて一言一句同じに見えるのに、とは思ったのですが、見落としがあったのだろうと納得して先の作業へ入りました。
今回はCodePenからBracketsへコピペしても表示が変わってしまい、作業に支障が出ています。

ちなみに前回はブロック毎でしたが、今回は現在作った全ての内容をCodePenへコピペしたので、編集している当該箇所以外の要素が影響している、といったことはないようです。
具体的には、前回も今回も、flexが適用されません。

Bracketsは1.14.2で今朝方に再ダウンロードしたもの、Macは10.9.5です。
上記の現象はコーディングのミスによるものでしょうか？

仕事柄、Adobeばかり使っているので、できればエディターもAdobeに統一して作業したい（バージョンの都合でDreamweaver?は使えない）と思っています。
ご回答の程よろしくお願い致します。

HTML

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scala=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <title>Cresta.Design</title>
    <meta name="description" content="Cresta.design_test">
    
    <link rel="stylesheet" href="reset.css"> 
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
<!-- header ------------------------------------------------------------------------------------------------------------------------>
    <header>
        <h1><a href="./">クリ★スタ</a></h1>
        <div>
            <nav>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Access</a></li>
                </ul>
            </nav>
        </div>
<!-- /header -->
        
<!-- headerForMobile -->
        <button>
            <span class="bar_top"></span>
            <span class="bar_middle"></span>
            <span class="bar_botttom"></span>
        </button>
    </header>
<!--/headerForMobile -->

<!-- main -------------------------------------------------------------------------------------------------------------------------->
    <main>
        <div class="fv">
            <p class="main_title">Cresta.Design</p>
        </div>
<!-- about --------------------------------------------------------------------------------------------------->
        <section class="section_wrapper">
            <h2>About</h2>
            <h3>ミニマルで<br>洗練されたデザインを。</h3>
            <p>近年、ミニマルなデザインが流行しています。そこで弊社は、クライアント企業様新規サービス等の課題に対してミニマルで洗練されたデザインを実現させることで解決のサポートを致します。もちろん全てのサービスにおいてミニマルなデザインが課題解決になるわけではないので、課題や今後のサービスの展開等しっかりとヒアリングを行った上でご提案させていただきます。</p>
        </section>
<!-- /about -->
        
<!-- service ------------------------------------------------------------------------------------------------->
        <section class="section_wrapper">
            <h2>Service</h2>

            <div class="contents_wrapper">
                <div class="text_contents">
                    <h3>リリース時のサポートで<br>サービスのブランディングを</h3>
                    <p class="text">弊社では、リリース時もサポートさせて頂きます。プレリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
                </div>                
                <div class="img_contents">
                    <img src="img/service-image@2x.jpg" alt="黒い布の上に置かれた黒い一眼レフカメラ">
                </div>
            </div>

            <div class="contents_wrapper_reverse">
                <div class="text_contents">
                    <h3>リリース後のサポートで<br>効果を最大化させる</h3>
                    <p class="text">弊社ではリリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
                </div>
                <div class="img_contents">
                    <img src="img/service-image02@2x.jpg" alt="黒い布の上に置かれた黒いiPhone">
                </div>
            </div>
        </section>
<!-- /service -->
        
<!-- news --------------------------------------------------------------------------------------------------->
        <section class="section_wrapper">
            <h2>NEWS</h2>
            <ul class="card_list">
                <li class="card_item">
                    <a href="#">
                        <div class="card_img">
                            <img src="img/card-image3@2x.jpg" alt="黒い背景にあるPC">
                        </div>
                        <p class="card_text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
                    </a>
                </li>
                
                <li class="card_item">
                    <a href="#">
                        <div class="card_img">
                            <img src="img/card-image3@2x.jpg" alt="黒い背景にあるPC">
                        </div>
                        <p class="card_text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
                    </a>
                </li>
                
                <li class="card_item">
                    <a href="#">
                        <div class="card_img">
                            <img src="img/card-image3@2x.jpg" alt="黒い背景にあるPC">
                        </div>
                        <p class="card_text">新規サイトを公開しました。今回のサイトは白と黒を基調にしたミニマルなデザインになっています。</p>
                    </a>
                </li>
            </ul>
        </section>
<!-- /news -->
        
<!-- contact ------------------------------------------------------------------------------------------------>
        <section class="section_wrapper">
            <h2>Contact</h2>
            <form action="" class="form">
                <div class="form_parts">
                    <label for="inut-name">担当者名</label>
                    <input type="text" id="input-subject">
                </div>
                
                <div class="form_parts">
                    <lebel for="input_tel">電話番号</lebel>
                    <input type="text" id="input_subject">
                </div>
                
                <div class="form_parts">
                    <lebel for="input_mail">メールアドレス</lebel>
                    <input type="text" id="input_subject">
                </div>
                
                <div class="form_parts">
                    <lebel for="detail">お問い合わせ内容</lebel>
                    <textarea name="" type="text" id="detail" cols="30" rows="10"></textarea>
                </div>
                
                <div class="form_send">
                    <input type="submit" value="送信" class="form_btn">
                </div>
            </form>
        </section>
<!-- /contact -->

    </main>
<!-- /main -->
        
<!-- footer ------------------------------------------------------------------------------------------------------------------------>
        <footer>
            <small>©crest.Design all rights reserved</small>
        </footer>
<!-- /footer -->

CSS


/* Common ------------------------------------------------------------------*/
html {color: #000; background-color: #fff;}
ol, ul, li {list-style: none;}
/*h1,h2,h3,h4,h5,h6 {font-weight: normal;}*/
a {text-decoration: none; color: #fff;}

/* header ------------------------------------------------------------------*/
header {
  background-color: #1B1310;
  color: #fff;
  height: 74px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 120px;
  border-bottom: 1px solid #fff;
}

header ul {display: flex;}

header li {margin-right: 55px;}


/* headerForMobile */
header button {display: none;}

/* main --------------------------------------------------------------------*/
.fv {
  height: 90vh; /* 画面の高さの90に指定 */
  background-color: #141414;
  background-image: url(img/fv-bgi@2x.jpg);
  background-size: cover;
  display: flex; /* メインコピーの上下左右中央寄せ */
  justify-content: center;
  align-items: center; /*　積み重なるように配置する　*/
  flex-direction: column;
}

.main_title {
  font-size: 5rem;
  color: #fff;
  font-weight: bold;
  border: 2px solid #fff;
  padding: 34px 42px;
}

/* sectionCommon -----------------------------------------------------------*/

.section_wrapper {padding: 100px 15% 50px;}

/* service ---------------------------------------------------------------- */

.text_contents, .img_contents {max-width: 480px;}

.contents_wrapper {
    display: flex;
    flex-wrap: wrap; /* フレックスアイテムを複数行に分割する */
    justify-content: space-between;
    align-items: center;
}

.contents_wrapper_reverse {
    margin-top: 50px;
    flex-direction: row-reverse;
}

Daregada

2020/09/02 01:44

> 具体的には、前回も今回も、flexが適用されません。どこに? もっと具体的に書いてください。「xxxクラスのyyy要素に対して」のようにです。「望んでいた通りの正しい表示」は、あなたの頭の中にしか存在しないので、他の人にわかるように説明しないと回答が得られません。

works_noname

2020/09/02 02:00

ご回答ありがとうございます。すみません、最後にコーディングのミスでしょうかとお聞きしておきながら、質問のメインがBracketsとCodePenでの動作の違いになっていた為、内容がずれていました。しかしたった今、自己解決いたしました。そちらに詳細を記入いたします。つたない質問でお時間を頂戴してしまい、申し訳ございませんでした。ご指摘、誠にありがとうございます。

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

回答1件

自己解決

原因は、共通のスタイルを記入していなかったことでした。
クリ★スタ様では順をおって、ひとつずつ解説してくださっているのですが、コードにはあって説明にはない共通項目が存在していたようで、そちらを入力しましたら、希望通りの表示にすることができました。

念のため詳しく書きますと、main内のfvと、service内のcontents_wrapperのflexが効きました。
前者はflexを利用してメインタイトルを上下左右中央に配置するはずが左右中央にできず、後者はflexで横並びにするはずが写真が下にまわりこんでいました。

BracketsとCodePenで表示が違っていたのは、前者については不明（やはりコーディングの際の入力ミスが原因だろうか）、後者についてはBracketsでは表示されていた画像が、CodePenでは相対パスで配置していた為に表示されておらずアイコンになっていたので、横幅が足りて横並びになっていた、ということのようです。

読んでくださった方、ご回答いただいたDaregata様、凡ミスでお時間を頂戴しまして申し訳ございません。
ありがとうございました。

投稿2020/09/02 02:07

works_noname

総合スコア6