背景デザインはwidth:100%;、文章だけwidth:60%;にしたい

HTML、CSSでHPを作成しているところです。
背景デザインはwidth:100%;、文章だけwidth:60%;にしたいのですが、文章とデザインが両方60％の幅になってしまいます。

現在は、以下のような状況です。

HTML
1<html>
2  <body>
3    <section>
4      <div class="body-wrapper">
5        <h1>文章</h1>
6        <p>文章</p>
7      </div>
8    </section>
9  </body>
10</html>

CSS
1html {
2  height: 100%;
3  width: 100%;
4}
5
6body {
7  height: 100%;
8  width: 100%;
9  margin:0;
10  padding:0;
11  background: #ffffff;
12  background-size: cover;
13  background-attachment: fixed;
14}
15
16section {
17  display: block;
18  width: 100%;
19  overflow: hidden;
20  background-color: #ffffff;
21  padding-bottom: 10%;
22  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 98%);
23  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 98%);
24}
25

.body-wrapper {width:60%;}にしてもsectionで設定したデザイン（background-color以降）がwidth:60%;になってしまいます。
}

どなたか、解決方法をご存知でしたら、お教えいただけますと幸いです。

azuapricot

2019/02/04 00:13

cssってこれだけですか？

shijimiiiiiiiii

2019/02/04 00:27

sectionの親要素であるhtmlとbodyに関して追記させていただきました。 cssは現状は上記の通りです。 body-wrapperに関しては、div class="body-wrapper"でまとめてwidth:60%;を設定したら文章だけwidth:60%;なると思っていましたが、デザインも60％になったので、現在は記述しておりません。

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

回答3件

ベストアンサー

もしこれがやりたいんだよ～というのであれば、
CSSのキャッシュクリアなどお試しください。

ブラウザF12を押してディベロッパーツールを開く→更新ボタン右クリック→キャッシュの消去とハードの再読み込み

投稿2019/02/04 00:45

azuapricot

総合スコア2341

azuapricot

2019/02/04 00:46

コメント投稿しようとしたら間違って新規投稿しちゃった・・・（すみません）削除リクエストしておきます

azuapricot

2019/02/04 00:48

あ、解決したってことはキャッシュクリアしたら治ったんでしょうかね。良かったです。

shijimiiiiiiiii

2019/02/04 00:51

まさに、「これがやりたいんだよ〜」でした！キャッシュクリアでできました！！ありがとうございますm(_ _)m

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

.body-wrapper {width:60%;}ではなく、.body-wrap {width:60%;}になっているからではないでしょうか。

投稿2019/02/04 00:15

unotalk

総合スコア124

shijimiiiiiiiii

2019/02/04 00:19

回答ありがとうございました。申し訳ございません。質問欄に写す際の私の注意不足による誤字でしたので、訂正いたしました。元のCSSはbody-wrapperとなっております。すみません。

unotalk

2019/02/04 00:43

であれば、文章は60%になるかと思います。 sectionのwidthは1000pxか100%かどちらでしょうか。ブラウザのcookieにcssが残っているから、などは考えられませんか。一度プライベートブラウザで試してみてください。念の為ですが、こういうふうにしたいということですよね？ https://codepen.io/unotalk/pen/YBQZWO

shijimiiiiiiiii

2019/02/04 00:53

unotalkさん、回答ありがとうございました。キャッシュを削除したらできましたm(_ _)m ありがとうございました！

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

html
1<html>
2  <body>
3    <section>
4      <div class="body-wrapper">
5        <h1>文章</h1>
6        <p>文章</p>
7      </div>
8    </section>
9  </body>
10</html>

css
1html {
2  height: 100%;
3  width: 100%;
4}
5
6body {
7  height: 100%;
8  width: 100%;
9  margin:0;
10  padding:0;
11  background: #ffFF99;
12  background-size: cover;
13  background-attachment: fixed;
14}
15
16section {
17  display: block;
18  width: 100%;
19  overflow: hidden;
20  background-color: #ff9999;
21  padding-bottom: 10%;
22  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 98%);
23  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 98%);
24}
25
26.body-wrapper {
27  background: #ffFF99;
28  width:60%;
29}