文字の右側にできた余計な余白を消したい。

前提・実現したいこと

以下の様にテキストの右側のmarginに空白ができてしまいます。
それによって、右側に余計な余白ができてしまいます。
この余白の消し方を教えてください。

試したこと

特にmarginについて記述していなかったので、

css
1margin: 0 0 0 0;

css
1margin-right: 0px;

など関わってそうなことも追記したりしましたが、何も変化がありませんでした。
これの対処法をご存じの方いらっしゃいましたらご教示ください。

該当のソースコード

html
1<body>   
2<!--タイトル背景-->
3    <div class="wrapper"></div>
4
5<!--タイトル文字-->
6   <h1 class="text1">ああ、</h1>
7   <h1 class="text2">あいう</h1>
8
9<!--逆三角-->
10    <div class="try"></div>
11</body>

css
1body {
2    background-color:#FAE268;
3}
4
5.wrapper {
6    position: relative;
7    overflow: hidden;
8    width: 100%;
9    height: 877px;
10}
11
12
13
14.wrapper::before{
15    content: '';
16    position: absolute;
17    top: 150px;
18    left: -30px;
19    width: 120%;
20    height: 300px;
21    background: #0639A6;
22    transform-origin: left center;
23    transform: rotate(-10deg);
24    z-index: -1;
25
26    /*背景画像*/
27    background-image:url(title-blue.png);
28    background-size: 100% auto; 
29    background-position: center;
30}
31
32
33
34
35
36.wrapper::after{
37    content: '';
38    position: absolute;
39    top:454px;
40    left: -30px;
41    width: 120%;
42    height: 300px; 
43    background: #CC191E;
44    transform-origin: left center;
45    transform: rotate(-10deg);
46    padding: 0px 0px 0px 0px;
47    z-index: -2;
48       /*背景画像*/
49    background-image:url(title-red.png);
50    background-size: 100% auto; 
51    background-position: center;
52}
53 
54
55.try {
56    position: absolute;
57    top: 500px;
58    overflow: hidden;
59    width: 0;
60    height: 0;
61    border-style: solid;
62    border-width: 0 100vw 25vw 0;
63    border-color: transparent #46003E transparent transparent;
64    z-index: -3;
65}
66
67
68
69.text1{
70    font-family: ta-f1blockline,sans-serif;
71    width: 100vh;
72    font-weight: 400;
73    font-style: italic;
74    position: relative;
75    top: -800px;
76    transform: rotate(-10deg);
77    font-size: 100pt;
78    color: #FAE268;
79}
80
81.text2{
82    font-family: ta-f1blockline,sans-serif;
83    font-weight: 400;
84    width: 690px;
85    font-style: italic;
86    position: relative;
87    top: -910px;
88    left: 280px;
89    transform: rotate(-10deg);
90    font-size: 165pt;
91    color: #FAE268;
92}
93

Lhankor_Mhy

2021/02/16 09:16

ご提示のコードを試してみましたが、「テキストの右側のmargin」はありませんでした。つまり、問題が再現しませんでした。それはそれとして、HTMLに全角スペースがあるので対処した方がいいと思います。

takio-

2021/02/16 10:07 編集

ありがとうございます。ただいま修正いたしました。

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

回答1件

特殊なフォントのようですし再現できる環境がないのですが
とりあえず全角スペースでインデントしているをやめてみてはどうでしょうか？

投稿2021/02/16 09:06

yambejp

総合スコア116724

takio-

2021/02/16 09:49

回答ありがとうございます。こちらに投稿する際に、間違って全角で入力してしまったため、実際のコードは半角になってます。

takio-

2021/02/16 10:09

一応、報告しますが、フォントを変えて、特に設定せずに実行してみましたが、同じようになりました。

yambejp

2021/02/16 10:16

私の環境ではとくにご指摘のようなことはないので、 codepenなどどこか確認できるサイトにソースをアップしてもらう方がよいかもしれません。ブラウザも何種類か試してみて下さい

takio-

2021/02/16 10:35

https://codepen.io/takio0000/pen/KKNWEQe こちらに載せました。たしかにこちらだと空白が影響を及ぼすことがありませんが、画面幅を狭くしたときにどうしても影響が出てきます。また、『あいう』の文字の位置を右揃えで%で指定したいのですが、右の空白を含めた位置設定になってしまいます。どうにか、空白を消すことはできませんか？

yambejp

2021/02/16 10:56

多分空白は勘違いだと思います。画面幅を狭めたときの影響はwrap要素が横幅を決めてしまうからでしょう

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