flexboxによる左右入替えをしたが、左カラムの左外部分に不要な余白が空いているのを削除したい

flexboxによる左右入替えをしました。

表示したいのは98%の幅でセンタリングされた2カラムのレイアウトです。

しかし、左カラムの左外部分に不要な余白が空いてしまいます。
デベロッパーツールでみても不要な余白は設定されていません。

どうしたらもう少し左寄りの、ちょうど真ん中に表示されるでしょうか？

HTML
1<div class="flex">
2
3  <div class="main">
4    <div class="info">
5      <div class="main-title">
6      タイトル     
7      </div>
8      <div class="info-txt">
9        テキストテキスト
10      </div>
11      
12    </div>
13  </div>
14
15  <div class="left">
16    左カラム
17  </div>
18  
19</div>

css
1.flex {
2    display: flex;
3    flex-flow: row-reverse;
4    margin: 0 auto;
5    width: 98%;
6}
7.left {
8    width: 25%;
9    border: 2px solid #0066ff;
10    margin-right: 15px;
11    padding: 5px;
12}
13.main {
14    width: 70%
15}
16
17.main-title {
18    background: linear-gradient(#0033cc, #0066ff);
19    color: #fff;
20    padding: 7px 20px;
21    border-radius: 7px;
22}

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

回答2件

少し左寄りの、ちょうど真ん中

右カラム以外の領域でちょうど真ん中に左カラムを置く、つまり、右カラムとの余白とページ左端との余白を同程度にする、という意味ですよね？
↓こちらではいかがでしょうか。

css
1.left {
2	width: 25%;
3	border: 2px solid #0066ff;
4	/* margin-right: 15px; */
5	padding: 5px;
6	margin: 0 auto;
7}

投稿2020/03/30 09:14

編集2020/03/30 09:15

Lhankor_Mhy

総合スコア36960

NAKAZAKI

2020/03/30 09:26

ありがとうございます！時間差で自己解決しました。お時間取ってくださり、ありがとうございました。

Lhankor_Mhy

2020/03/30 09:30

ご解決されて何よりです。

NAKAZAKI

2020/04/02 05:42

ありがとうございました！

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

自己解決

すみません！

％を間違えていました。

左カラムのwidthを28％にしたら解決しました。

投稿2020/03/30 09:22

NAKAZAKI

総合スコア10

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

flexboxによる左右入替えをしたが、左カラムの左外部分に不要な余白が空いているのを削除したい

関連した質問