cssがhtmlに反映されない

フレーム（枠線）が表示されないのですが、どうすればいいでしょうか

ソースコード
cssです↓

css
1コード
2body {
3  font: 1.1em/1.5 sans-serif;
4  padding-top: 20px;
5  }
6  .main {
7  border: 1px solid red;
8  margin: auto;
9  padding: 10px 20px 30px;
10  width: 760px;
11  }
12  
13  p ~ h2 {
14  color: red;
15  }
16
17```html
18コード
19```<!doctype html>
20
21<html>
22  <head>
23    <meta charset="UTF-8">
24    <title>特殊なセレクタの練習</title>
25    <link rel="stylesheet" href="style.css">
26  </head>
27<body>
28  <div class="main">
29    <h1>Heading 1</h1>
30    <a href="#">mainクラスの子要素のリンク</a>
31    <p>
32      lorem ipsum deodirv deff cecc,dewwev cedef ewfewf fewfe,fefewwef cewcewc   cewcewcew,gmailjf jyukenn net id smather fucker,jceucuecu juyuidcihrvb didhur,cunfuurbdfeifen difuf dejfri,jfuritb frifji frnvirnv vnrovn,jfijfiu fierif kijduf,fjrvni ijeijvi feiwiern jijv,irinvi vinrvin vinrinv,vinjv irnvirn invirnv nminrvi,jvnjnvneknv vnmiriionobe vnnnr iurnvbr nrvionv jvnrenv inrinvin ivninvri nmivnribn,nvirjvorn irvnb inrvirn ednvpw,dkenivn nivnri,jnvenvnir eveknv erivnribv dknirvnrv
33    </p>
34    <h2>Heading 2</h2>
35    <p>uenuce jvurehuihuhregyefvyg uhruwbuybrv uenubruwibcwb jhwur, uenquf uuchuhvc jicheuhbeu uhceuuirbv hnueqhuibe nune, ijebncuiebcuib uvub ucnubvr uinbuibr.<a href="#">mainクラスの小要素ではないではない</a>iuhuicbyrb ncuenucb usux,ucunhrc unecunrv uncunew iuruv.
36    </p>
37    <a href="#">mainクラスの子要素のリンク</a>
38    <h2>Heading 2</h2>
39    <p>
40       uncun uncuinrc nucnirn iuncuirn nuce uinceucn nucenucn ncnuenc oicjioj ijcencunr incin ncenunce,ujc9uhrcicj uncunc nucncr unce uneuuec uneunenc uneunc,ncuen unceunce unnduenc uncueucnnucneunbc uncunrc unnuec nucneun nuvun nvutnuvn,nvutnuv nuvtnut nvutnvn untvunv</p>
41    <p>
42      uncuirn nuce uinceucn nucenucn ncnuenc oicjioj ijcencunr incin ncenunce,ujc9uhrcicj uncunc nucncr unce uneuuec uneunenc uneunc,ncuen unceunce 
43    </p>
44  </div>
45</body>

![![イメージ説明](5185991704295fe5ec857272574c6a33.png)](3768a2cae6bb97e75f6523fe5a4138dd.png)![イメージ説明](9a6b2e69cf3efcc578a3f7a374d940d1.png)

itagagaki

2021/05/30 11:16

CSSで .main に border: 1px solid; としてありますが、これをたとえば border: 1px solid red; にしたら赤枠付きませんか？

Ta-tun

2021/05/30 11:16

画像でソース貼るのはやめた方がいいです。回答者が検証するのに手打ちをしないといけないので回答が付きづらくなると思います。

syuma0923

2021/05/30 11:24

赤枠つきませんでした

syuma0923

2021/05/30 11:25

ソースとはコードのことでしょうか？？

m.ts10806

2021/05/30 11:33

そもそもURLおかしいんじゃないでしょうか。それぞれのファイルの階層どうなってますか？画像なのでコピペできませんが、 ttttt.html/oppai.html の配下に今回のHTMLがあるようですが、 cssはttttt.htmlディレクトリと同階層にあるように見受けられます。あと既に指摘されている通り、画像でコードを提示されてもコピペできないので、こちらで質問者の現象が再現できないのです。マークダウンのcode機能で提示してください。 https://teratail.com/help/question-tips

syuma0923

2021/06/03 06:01

body { font: 1.1em/1.5 sans-serif; padding-top: 20px; } .main { border: 1px solid red; margin: auto; padding: 10px 20px 30px; width: 760px; } p ~ h2 { color: red; }

syuma0923

2021/06/03 06:01

code です

m.ts10806

2021/06/03 06:02

質問は編集できます。質問本文を編集し、コードはマークダウンのcode機能で提示してください。 https://teratail.com/help/question-tips

Ta-tun

2021/06/03 07:16

質問者さんはサンプルサイトのサンプルが画像で準備されていたらどう感じますか？コピペできる状態で用意されているからこそ、いっちょコピって試してみようかって思いませんか？回答者側も、コピペできる状態で質問されていたら、いっちょ検証してみようかなって思います。私はjsfiddleというサイトにペーストして確認しています。とりあえず簡単な手打ちをしたら赤枠が表示されたので見てみてください： https://jsfiddle.net/8h1apjLu/ ここに画像にあるhtmlをペーストしてCtr＋Enterで再表示してみてください。赤枠が表示されたら回答にて指摘されている点が表示がおかしい理由じゃないでしょうか。