headerの左側に余白ができてしまって困っています。

Question

前提・実現したいこと

HTML初心者です。
headerの左側に余白ができてしまって困っています。
左側の余白を無くして横幅いっぱいにheaderを広げたいです。
bodyに対してmargin:0;とpadding:0;は入力済みです。
ご回答のほど、宜しくお願いいたします。

ロゴ１の左側に余白ができてしまっております。
使用デバイスはGoogle Chromeです。

該当のソースコード(HTML)

【HTML】
<header>
<div class="header_container">
<ul class="header_contents">
<li class="header_logo">
<img src="images/logo.png" alt="ロゴ１">
</li>
<li class="header_contents_item">
<img src="images/kensaku.png" alt="検索窓">
</li>
<li class="header_contents_item">
<img src="images/logo2.png" alt="ロゴ２">
</li>
<li class="header_contents_item">
<a href="#" class="header_conversion_btn"><img src="images/tel_btn.png" alt="お問い合わせボタン"></a>
</li>
</ul>
</div>
</header>

該当のソースコード(CSS)

【CSS】
body{
margin: 0;
padding: 0;
margin-left: 0;
-webkit-text-size-adjust: 100%;
}

div{
display:inline;
}

ul,li{
padding-inline-start: 0px;
list-style-type: none

}

img{
width: 100%;
height: auto;
}

header{
display:inline;
position: fixed;
width: 100%;
height:80px;
overflow: auto;
background-color:#FFFFC9;
}

.header_contents{
display: flex;
background-color:#FFFFC9;
}

.header_logo{
margin-right: auto;
}

.header_contents_item{
padding-left: 40px;
}

Comments

[yo_u]

左側の余白とは、ヘッダー内のロゴ１の左側がという意味でしょうか。
使用しているブラウザは何でしょうか？
私のところで代替画像で試してみたところ、Edgeでは正しく見えています。
「display: flex;」ってIEだとなんかうまくいかないとかどこかで見た記憶が・・・

[wakaran_hito]

早速のご確認ありがとうございます！
おっしゃる通りヘッダー内のロゴ１の左側に余白ができてしまっております。
使用ブラウザはGoogleChromeです。

[dit.]

一度デベロッパーツール等でどこに対する余白なのかを確認してみてください。

[wakaran_hito]

デベロッパーツールで確認してますが、どこに対する余白なのかが出てこないんですよね…

[dit.]

提示されたコードだけだと再現できないようです。
https://codepen.io/dit4410/pen/ExNVxEG

他の部分に原因があるかもしれません。可能な範囲で提示をお願いします。
文章や画像はダミーで構いません。

[hatena19]

推測ですが、<header>の前に全角空白がないか確認してみてください。

Answer 1

推測ですが、<header>の前に全角空白がないか確認してみてください。