display:flexで左に隙間ができる

Question

<div class="f-inner">
 　　<div class="f-left">
    </div>
    <div class="f-right">
    </div>
  </div>

*{
  box-sizing: border-box;

}
body{
  width: 500px;
  margin: 0;
  padding: 0%;
}
.f-inner{
  display: flex;
  width: 100%;
  justify-content: baseline;
}
.f-left{
  width: 40%;
  background-color: rgb(212, 208, 203);

  height: 100px;
}
.f-right{
  width: 60%;
  background-color: rgb(78, 74, 57);
  height: 100px;
}

display:flexで要素を横並びにしたいのですが左に隙間ができてしまいます。

### 発生している問題・エラーメッセージ
bodyのwidthを1500pxにし、width100%のdivを設置。
divにdisplay：flexで横並びに。
その際に左端に隙間ができます。
marginやpaddingは設定していないのにできてしまいます。

### 該当のソースコード


### 試したこと

検証ツールでjustify-contentを全部試したのですが余白が消えません。


### 補足情報（FW/ツールのバージョンなど）

開発環境　VScode googlechrome

Comments

[itagagaki]

他者が状況を再現できるコードを貼ってください。

[ssssbbbb0819]

ご指摘いただきありがとうございます。
再記したコードを確認いただけたら幸いです。

Answer 1

<div class="f-inner">と<div class="f-left">の間に全角スペースがあります。
それが空白の原因です。

Comments

[ssssbbbb0819]

ありがとうございます。
解決しました！

Answer 2

body 要素の margin をゼロにしたらいかがでしょうか？
開発者ツールのインスペクターを使えば、どの要素に余白が付いてるかチェックできます。

Comments

[ssssbbbb0819]

インスペクタで確認してもmarginやpaddingの類ではないみたいです