pタグ　width 適用されない

質問失礼いたします。下の写真のようにcssのwidthが適用されません。どのように対処すればよろしいでしょうか。また、なぜwidthが適用されていないのでしょうか。ご教示お願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<title>事前テスト</title>
6	<link rel="stylesheet" href="css/style.css">
7</head>
8<body>
9	<div class="container">
10		<header>
11			<div>
12				<h2>ZeroPlus</h2>
13				<p>旅行・プログラミング</p>
14			</div>
15			<ul>
16				<li class="list1">ホーム</li>
17				<li class="list1">写真</li>
18				<li class="list1">自己紹介</li>
19				<li>お問い合わせ</li>
20			</ul>
21		</header>
22
23			<img src="img/mv.jpg" alt="" class="img1">
24			<p class="blank b1">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
25		 
26		<div class="title1">
27			<img src="img/img01.jpg" alt="">
28			<div class="passage">
29				<h2>タイトルタイトル</h2>
30			<p class="blank">lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</p>
31			<p>詳しく見る</p>
32			</div>
33			
34		</div>
35
36	</div>
37
38 
39
40	
41</body>
42</html>

css
1@charset "UTF-8";
2
3.container{
4    width: 400px;
5    background-color: gray;
6    padding: 50px 100px;
7    margin: 0 auto;
8}
9
10header{
11    display: flex;
12}
13
14header ul{
15    display: flex;
16    list-style: none;
17    margin-left:auto;
18    margin-top:40px;
19    font-size: 10px;
20}
21
22.list1{
23    margin-right: 20px;
24}
25
26
27header h2{
28    font-size: 20px;
29    margin-bottom: 0px;
30}
31
32header div p{
33    font-size: 10px;
34    margin-top: 0px;
35}
36
37.img1{
38    width:400px;
39    height: auto;
40    margin-top: 30px;
41}
42
43.blank{
44    font-size:5px;
45    transform: scale(0.7);
46    
47}
48
49.b1{
50width: 400px;
51overflow-wrap: break-word;    
52}
53
54.title1{
55    display: flex;
56}
57
58.title1 h2{
59    font-size: 10px;
60}
61
62.title1 img{
63    width: 180px;
64    height: auto;
65}

試してみたこと
・.b1のwidthを100％にしてみた。また500pxなど他の値も打ってみた。
・.b1のoverflow-wrap:break-word;を消してみた。

itagagaki

2021/08/14 08:32

.b1のwidthを変えると反映されましたよ。質問に書いたコード以外に何かありませんか？

koko122102

2021/08/14 09:35

ご返信ありがとうございます。先ほどもう一度試したところ正常に反映されました。ご指摘ありがとうございました。

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

回答1件

ベストアンサー

.blankの方にtransform: scale(0.7)と指定されているから、400×0.7で280になっているんじゃないでしょうか。

投稿2021/08/14 08:44

ishina_yum

総合スコア509

koko122102

2021/08/14 09:36

ご回答ありがとうございます。widthの幅のご指摘はおっしゃる通りでした。ご指摘ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.34%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

pタグ　width 適用されない

関連した質問